Css 背景大小转换在Chrome中不起作用

我正在尝试转换

背景大小

和

背景颜色

• Chrome：背景大小的转换不起作用
• Firefox：两者都工作正常

我还创建了一个

。突出显示{
显示：块；
位置：相对位置；
/*最小高度：800px*/
最小高度：200px；
背景位置：中心；
背景重复：无重复；
/*填充顶部：200px*/
填充顶部：80px；
/*背景尺寸：封面*/
}
.亮点：之前{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,25）；
内容：“；
}
.亮点{
位置：相对位置；
高度：200px；
光标：指针；
背景尺寸：自动110%；
背景位置：中心；
-moz过渡：背景尺寸为3s；
-webkit过渡：背景尺寸为3s；
过渡：背景大小为3s；
}
.亮点：悬停{
背景尺寸：自动130%；
背景色：rgba（0,0,0,0.4）；
-moz转换：背景尺寸3s轻松；
-webkit过渡：背景尺寸为3s；
过渡：背景大小为3s；
}
.亮点：之前{
内容：''；
位置：绝对位置；
左：0；
排名：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.4）；
-moz过渡：背景色3秒；
-webkit过渡：背景色3秒；
过渡：背景色；
}
。突出显示：悬停：之前{
背景色：rgba（0,0,0,0.8）；
-moz过渡：背景色3秒；
-webkit过渡：背景色3秒；
过渡：背景色；
}

---

您可以使用

变换：缩放（1.3）

和

变换：全部

来实现背景大小变换效果

更新

注意：我还添加了一个包装器来隐藏溢出

.container{
溢出：隐藏；
}
.亮点{
显示：块；
位置：相对位置；
/*最小高度：800px*/
最小高度：200px；
背景位置：中心；
背景重复：无重复；
/*填充顶部：200px*/
填充顶部：80px；
/*背景尺寸：封面*/
}
.亮点：之前{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,25）；
内容：“；
}
.亮点{
位置：相对位置；
高度：200px；
光标：指针；
背景尺寸：自动110%；
背景位置：中心；
-moz转换：所有3s轻松；
-webkit过渡：所有3s轻松；
过渡：所有3s轻松；
}
.亮点：悬停{
转换：比例（1.3）；
背景色：rgba（0,0,0,0.4）；
-moz转换：所有3s轻松；
-webkit过渡：所有3s轻松；
过渡：所有3s轻松；
}
.亮点：之前{
内容：''；
位置：绝对位置；
左：0；
排名：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.4）；
-moz过渡：背景色3秒；
-webkit过渡：背景色3秒；
过渡：背景色；
}
。突出显示：悬停：之前{
背景色：rgba（0,0,0,0.8）；
-moz过渡：背景色3秒；
-webkit过渡：背景色3秒；
过渡：背景色；
}

---

您可以使用

变换：缩放（1.3）

和

变换：全部

来实现背景大小变换效果

更新

注意：我还添加了一个包装器来隐藏溢出

.container{
溢出：隐藏；
}
.亮点{
显示：块；
位置：相对位置；
/*最小高度：800px*/
最小高度：200px；
背景位置：中心；
背景重复：无重复；
/*填充顶部：200px*/
填充顶部：80px；
/*背景尺寸：封面*/
}
.亮点：之前{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,25）；
内容：“；
}
.亮点{
位置：相对位置；
高度：200px；
光标：指针；
背景尺寸：自动110%；
背景位置：中心；
-moz转换：所有3s轻松；
-webkit过渡：所有3s轻松；
过渡：所有3s轻松；
}
.亮点：悬停{
转换：比例（1.3）；
背景色：rgba（0,0,0,0.4）；
-moz转换：所有3s轻松；
-webkit过渡：所有3s轻松；
过渡：所有3s轻松；
}
.亮点：之前{
内容：''；
位置：绝对位置；
左：0；
排名：0；
右：0；
底部：0；
背景色：rgba（0,0,0,0.4）；
-moz过渡：背景色3秒；
-webkit过渡：背景色3秒；
过渡：背景色；
}
。突出显示：悬停：之前{
背景色：rgba（0,0,0,0.8）；
-moz过渡：背景色3秒；
-webkit过渡：背景色3秒；
过渡：背景色；
}

---

以下是另一个在Chrome和Firefox上都能正常工作的解决方案：

HTML代码：

<div class="highlight">
    <div class="filter">
    </div>
    <img src="http://cdn2.stillgalaxy.com/ori/2015/06/06/female-doctors-stock-photos-2331433563559.jpg" alt="image" />
</div>

.highlight {
  display: block;
  position: relative;
  text-align: center;
  overflow: hidden;
}
.highlight .filter {
    background-color:rgba(0,0,0,0.4);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: background-color 3s ease;
}
.highlight:hover > img{
  transform: scale(1.3);
}
.highlight:hover > .filter {
    background-color:rgba(0,0,0,0.8);
}


.highlight img {
  height: 280px;
  transition: transform 3s ease;
}

---

下面是另一个在Chrome和Firefox上都能正常工作的解决方案：

HTML代码：

<div class="highlight">
    <div class="filter">
    </div>
    <img src="http://cdn2.stillgalaxy.com/ori/2015/06/06/female-doctors-stock-photos-2331433563559.jpg" alt="image" />
</div>

.highlight {
  display: block;
  position: relative;
  text-align: center;
  overflow: hidden;
}
.highlight .filter {
    background-color:rgba(0,0,0,0.4);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    transition: background-color 3s ease;
}
.highlight:hover > img{
  transform: scale(1.3);
}
.highlight:hover > .filter {
    background-color:rgba(0,0,0,0.8);
}


.highlight img {
  height: 280px;
  transition: transform 3s ease;
}

---

这不起作用的原因是当使用诸如

封面

、

包含

或

自动

等关键字时，

背景大小

不可设置动画（或至少不应设置动画）

进一步解释：

可设置动画：是的，作为长度、百分比或计算（）的可重复列表；当两个值都是长度时，它们被插值为长度；当两个值都是百分比时，它们被插值为百分比；否则，这两个值都将转换为长度和百分比之和的calc（）函数（每个值可能为零），并且这些calc（）函数将每个值的一半插值为实数这意味着关键字值不可设置动画

因此，将原始/最终值调整为实际数值