css过渡的背景缩放不起作用
[英]background zoom with css transitions not working
问题描述
我正在尝试添加一个CSS过渡，以便当用户将鼠标悬停在div上时，背景会像这样https://codepen.io/mrsalami/pen/EpLZMe放大。 但是，过渡延迟不起作用。
我的HTML：
<div class="what-we-do" id="home-block" style="background: url('http://www.intrawallpaper.com/static/images/1968081.jpg') center center no-repeat;">
<div class="home-box-text">
<h1>What We Do</h1>
</div>
</div>
我的CSS：
#home-block {
width: 100%;
transition-delay: 2s;
-moz-transition-delay: 2s;
-ms-transition-delay: 2s;
-webkit-transition-delay: 2s;
-o-transition-delay: 2s;
height: calc((100vh - 133px)/ 3);
-webkit-background-size: 100%;
background-size: 100%;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
#home-block:hover {
background-size: 150% !important;
}
#home-block .home-box-text {
margin: 0;
}
#home-block .home-box-text h1 {
font-size: 30px;
text-transform: uppercase;
}
#scroll-body {
padding-left: 35px;
}
我的问题的Codepen是https://codepen.io/mrsalami/pen/WKJRjr
6 个解决方案
解决方案1
1 2018-08-02 13:06:31
您可以像这样在CSS中将图像更改为主体的背景图像：
#home-block {
background:url(http://www.intrawallpaper.com/static/images/1968081.jpg) no-repeat;
width: 100%;
height: 200px;
color:#86A3B1;
background-size: 100%;
transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-webkit-transition: all 3s ease;
-o-transition: all 3s ease;
}
#home-block:hover {
background-size: 150%;
}
解决方案2
1 2018-08-02 13:22:20
#home-block { width: 100%; height:150px; background: url("http://www.intrawallpaper.com/static/images/1968081.jpg") center center no-repeat; transition: all 2s ease; // height: calc((100vh - 133px)/ 3); background-size: 100%; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; } #home-block:hover { background-size: 150%; } #home-block .home-box-text { margin: 0; } #home-block .home-box-text h1 { font-size: 30px; text-transform: uppercase; } #scroll-body { padding-left: 35px; }
<div class="what-we-do" id="home-block" style=""> <div class="home-box-text"> <h1>What We Do</h1> </div> </div>
解决方案3
1 2018-08-02 13:35:04
您必须在一个CSS声明中添加背景图片。 因此，无需在内联语句中添加背景图片，就可以添加以下内容。
#home-block {
background: url('http://www.intrawallpaper.com/static/images/1968081.jpg') center no-repeat;
width: 100%;
height: 200px;
color:#86A3B1;
background-size: 100%;
transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-webkit-transition: all 3s ease;
-o-transition: all 3s ease;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center
}
#home-block:hover {
background-size: 150%;
}
HTML部分已完成。
<body>
<div class="what-we-do" id="home-block">
<div class="home-box-text">
<h1>What We Do</h1>
</div>
这对我来说很好。 :)
解决方案4
0 2018-08-02 13:13:34
您没有在代码的任何地方定义过渡。 只有过渡延迟。
除此之外，您的内联样式将覆盖悬停状态中定义的样式。 将内联样式移动到CSS。
另外，您应始终在带前缀的版本之后定义非带前缀的属性。 这个很重要。 如果您没有正确的顺序，则浏览器可能会使用实验性的前缀实现方式，而不是符合标准的非前缀版本。
#home-block { width: 100%; background: url("http://www.intrawallpaper.com/static/images/1968081.jpg") center center no-repeat; background-size: 100%; transition: all 1s ease; transition-delay: 1s; height: calc((100vh - 133px)/ 3); margin-bottom: 20px; display: flex; align-items: center; justify-content: center; } #home-block:hover { background-size: 150%; } #home-block .home-box-text { margin: 0; } #home-block .home-box-text h1 { font-size: 30px; text-transform: uppercase; } #scroll-body { padding-left: 35px; }
<div class="what-we-do" id="home-block" style=""> <div class="home-box-text"> <h1>What We Do</h1> </div> </div>
如果由于某种原因需要保留内联样式，则可以将背景尺寸作为声明的一部分...
<div class="what-we-do" id="home-block" style="background: url('http://www.intrawallpaper.com/static/images/1968081.jpg') center center / 100% no-repeat; ">
或者在您的默认状态CSS中使用!important ...
background-size: 100% !important;
解决方案5
0 2018-08-02 13:20:31
重要的是要注意，除了在CSS中设置背景图片之外，还必须使用transition: ease-in-out而不是transition-delay因为您尚未设置过渡。
设置transition: ease-in-out ，然后再设置transition-delay将为您提供缓入效果，但是会在开始之前增加2秒的延迟。 您发布的示例链接显示了这一点-https://codepen.io/mrsalami/pen/EpLZMe
解决方案6
0 2018-08-02 13:58:25
就像上面提到的那样，您要覆盖内联样式。 如果您确实必须有图像内联的URL，请尝试将所有背景属性分开，如下所示：
HTML：
<div class="what-we-do" id="home-block" style="background-image: url('http://www.intrawallpaper.com/static/images/1968081.jpg');">
<div class="home-box-text">
<h1>What We Do</h1>
</div>
</div>
CSS：
#home-block {
transition: all 2s ease;
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
...
}
Codepen： https ：//codepen.io/anon/pen/WKJjMW
请记住，在CSS中使用！important始终是一种不好的做法，如果必须使用它，那可能是在做错了什么。
CSS过渡不适用于导航
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.