背景大小转换在Chrome中无法使用 [英] Background-size transition not work in Chrome

问题描述

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

• Chrome ：转换 background-size 无效


• Firefox ：两者都正常工作

https://jsfiddle.net/0Lp787z1/1/ =nofollow> fiddle 。

  .highlight {display：block;位置：相对; / * min-height：800px; * / min-height：200px; background-position：中心;背景重复：无重复; / * padding-top：200px; * / padding-top：80px; / * background-size：cover; * /}。highlight：before {position：absolute; top：0; left：0; width：100％;高度：100％; background-color：rgba（0，0，0，.25）; content：;}。highlight {position：relative; height：200px; cursor：pointer; background-size：auto 110％; background-position：中心; -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 =highlightstyle =background-image：url（http://cdn2.stillgalaxy.com/ori/2015/06/06/female-doctors-stock-photos-2331433563559.jpg）;> / div>  

感谢

解决方案

这不工作的原因是 background-size 在使用关键字 cover时不是可动的（或者至少不应该是） ，包含或自动。

MDN 进一步说明：

> ：可以重复列表的一个简单列表， ;当两个值都是长度时，它们被内插为长度;当两个值都是百分比时，它们以百分比内插;否则，两个值都转换为calc（）函数，它是长度和百分比（每个可能为零）的和，这些calc（）函数每半个内插为实数。 这意味着关键字值不可动画。

因此，将原始/最终值调整为实际数字（或长度，因为它们被更准确地提及），你将解决这一个。

I'm trying to transition background-size and background-color.

• Chrome: Transition of background-size not working
• Firefox: Both are working fine

I have also created a 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>

Anybody helps me with this? Or can figure that is broking these transition?

Thanks

解决方案

The reason why this is not working is that background-size is not animatable (or at least shouldn't be) when using a keyword such as cover, contain or auto.

MDN Explains further:

Animatable: yes, as a repeatable list of , a simple list of , a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. This means keyword values are not animatable.

So, adjust the original/final values to be actual numbers (or lengths as they are more properly referred to) and you'll resolve this one.

这篇关于背景大小转换在Chrome中无法使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！