背景尺寸转换在 Chrome 中不起作用

Question

我正在尝试转换 background-size 和 background-color。

• Chrome：background-size 的转换不起作用
• Firefox：两者都运行良好

我还创建了一个fiddle。

.highlight {
  display: block;
  position: relative;
  /*min-height: 800px;*/
  min-height: 200px;
  background-position: center center;
  background-repeat: no-repeat;
  /*padding-top: 200px;*/
  padding-top: 80px;
  /*background-size: cover;*/
}
.highlight:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .25);
  content: "";
}
.highlight {
  position: relative;
  height: 200px;
  cursor: pointer;
  background-size: auto 110%;
  background-position: center center;
  -moz-transition: background-size 3s ease;
  -webkit-transition: background-size 3s ease;
  transition: background-size 3s ease;
}
.highlight:hover {
  background-size: auto 130%;
  background-color: rgba(0, 0, 0, 0.4);
  -moz-transition: background-size 3s ease;
  -webkit-transition: background-size 3s ease;
  transition: background-size 3s ease;
}
.highlight:before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  -moz-transition: background-color 3s ease;
  -webkit-transition: background-color 3s ease;
  transition: background-color 3s ease;
}
.highlight:hover:before {
  background-color: rgba(0, 0, 0, 0.8);
  -moz-transition: background-color 3s ease;
  -webkit-transition: background-color 3s ease;
  transition: background-color 3s ease;
}

<div class="highlight" style="background-image:url(http://cdn2.stillgalaxy.com/ori/2015/06/06/female-doctors-stock-photos-2331433563559.jpg);">
</div>

有人帮我解决这个问题吗？或者可以确定正在破坏这些过渡？

谢谢

Answer 1

可以使用transform: scale(1.3)和transition: all来实现背景大小的过渡效果。

更新fiddle。

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

.container {
  overflow: hidden;
}
.highlight {
  display: block;
  position: relative;
  /*min-height: 800px;*/
  min-height: 200px;
  background-position: center center;
  background-repeat: no-repeat;
  /*padding-top: 200px;*/
  padding-top: 80px;
  /*background-size: cover;*/
}
.highlight:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .25);
  content: "";
}
.highlight {
  position: relative;
  height: 200px;
  cursor: pointer;
  background-size: auto 110%;
  background-position: center center;
  -moz-transition: all 3s ease;
  -webkit-transition: all 3s ease;
  transition: all 3s ease;
}
.highlight:hover {
  transform: scale(1.3);
  background-color: rgba(0, 0, 0, 0.4);
  -moz-transition: all 3s ease;
  -webkit-transition: all 3s ease;
  transition: all 3s ease;
}
.highlight:before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  -moz-transition: background-color 3s ease;
  -webkit-transition: background-color 3s ease;
  transition: background-color 3s ease;
}
.highlight:hover:before {
  background-color: rgba(0, 0, 0, 0.8);
  -moz-transition: background-color 3s ease;
  -webkit-transition: background-color 3s ease;
  transition: background-color 3s ease;
}

<div class="container">
  <div class="highlight" style="background-image:url(http://cdn2.stillgalaxy.com/ori/2015/06/06/female-doctors-stock-photos-2331433563559.jpg);">
  </div>
</div>

Answer 2

这是另一个在 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>

css：

.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;
}

Answer 3

这不起作用的原因是background-size 在使用诸如cover、contain 或auto 之类的关键字时不可动画化（或至少不应该如此）。

MDN 进一步解释：

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

因此，将原始/最终值调整为实际数字（或更恰当地称为长度），您将解决这个问题。

Answer 4

In background-size you have to give width otherwise it wont work. 
Check this fiddle i have modified your code : 

https://jsfiddle.net/shriharim/26Lq1oxx/