我正在尝试过渡background-size
和background-color
。
-
chrome :
background-size
的过渡不起作用 - Firefox :两者都在工作正常
我也创建了一个小提琴。
.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>
有人帮助我吗?还是可以弄清楚这些过渡?
谢谢
不起作用的原因是使用cover
,contain
或auto
时,background-size
不是动画(或至少不应该是)。
mdn 进一步说明:
Animatable :是的,作为可重复的列表,简单的列表,长度,百分比或calc();当两个值都是长度时,它们会插值为长度。当两个值是百分比时,它们被插值为百分比;否则,将两个值转换为一个calc()函数,该函数是长度和百分比(每个可能为零)的总和(每个)函数,并且这些calc()函数每个都将一半插值为实数。这意味着关键字值不是动画。
因此,将原始/最终值调整为实际数字(或更正确地提到的长度),您将解决此问题。
您可以使用transform: scale(1.3)
和transition: all
来实现背景大小过渡效果。
更新了小提琴。
注意:我还添加了包装器以隐藏溢出。
.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>
这是另一个在Chrome&amp;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;
}
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/