我希望当用户悬停在具有图像背景的链接(div)上时,能够产生缩放效果。
我不知道如何仅对背景而非文本进行缩放!我找不到最好的方法。
这里是一段代码(与我的期望不符):
.light_blue {
display: block;
color: #fff;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
width: 100%;
}
a.light_blue:hover {
text-decoration: none;
color: #fcb428;
}
div.wrap {
height: 33%;
width: 33%;
overflow: hidden;
position: relative;
}
.wrap {
-moz-transition: all .5s;
-webkit-transition: all .8s;
transition: all .8s;
background-position: center center;
}
.wrap:hover {
-webkit-background-size: 120%;
-moz-background-size: 120%;
-o-background-size: 120%;
background-size: 120%;
}
.bg_flat {
position: absolute;
font-family: "Archivo Narrow";
background: url(http://hokejfan.pl/hokej2015/kluby/img/black_bg4.png);
background-size: contain;
bottom: 0px;
padding: 5px;
}
.bg_naglowek {
text-transform: uppercase;
font-size: 29px;
}
.bg_flat2 {
position: absolute;
background: url(../img/black_bg4.png);
background-size: contain;
font-family: "Archivo Narrow";
bottom: 5px;
width: -webkit-calc(100% - 10px);
width: calc(100% - 10px);
padding: 15px;
}
<div class="col-sm-4" style="padding: 5px;">
<a href="#news" class="light_blue wrap" style="background-image: url('http://hokejfan.pl/hokej2015/kluby/static/images2/48b51db749e3d9d992a61d289bc3c535.jpg'); height: 180px;">
<div class="bg_flat2">
<b class="bg_naglowek">Hello World</b>
</div>
</a>
</div>
background:inherit
规则应用于 ::before 元素,因此它具有与 .wrap 相同的背景,并通过transform: scale(1.2);
在悬停时进行缩放。 - Stephen M. Harris