我想在我的网站上获得此效果。例如:https://rno1.com/
(向下滚动到“我们专注于”)
我是HTML和CSS的新手,我也在使用WordPress,这让它变得有点困难。在StackOverflow开始用这个问题编写代码:
Change body background image on hover with pure html/css
但是我想在交换图像之间添加一个转换,我还需要在哪里更改字体属性?
div.link>a {
displya: inline-block !important;
position: relative !important;
z-index: 100;
}
.bg1:hover+.background {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/divorce-min.jpg);
}
.bg2:hover+.background {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/Fotolia_37279445_Subscription_Monthly_M-min.jpg);
}
.background {
background: transparent;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<div class=container>
<div class="link">
<a href="#" class="bg1">bg1</a>
<div class=background></div>
<a href="#" class="bg2">bg2</a>
<div class=background>
</div>
</div>
</div>
您可以添加一些不透明度转换,如下所示:
div.link>a {
display: inline-block;
position: relative;
z-index: 100;
}
.bg1+.background {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/divorce-min.jpg);
}
.bg1:hover +.background {
opacity:1;
}
.bg2+.background {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/Fotolia_37279445_Subscription_Monthly_M-min.jpg);
}
.bg2:hover +.background {
opacity:1;
}
.background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition:1s all;
opacity:0;
}
<div class=container>
<div class="link">
<a href="#" class="bg1">bg1</a>
<div class=background></div>
<a href="#" class="bg2">bg2</a>
<div class=background>
</div>
</div>
</div>
您还可以优化您的代码,如下所示:
div.link>a {
display: inline-block;
}
.bg1:before {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/divorce-min.jpg);
}
.bg1:hover:before {
opacity:1;
}
.bg2:before {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/Fotolia_37279445_Subscription_Monthly_M-min.jpg);
}
.bg2:hover:before {
opacity:1;
}
.bg:before {
content:"";
position: fixed;
z-index:-1;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition:1s all;
opacity:0;
}
<div class=container>
<div class="link">
<a href="#" class="bg1 bg">bg1</a>
<a href="#" class="bg2 bg">bg2</a>
</div>
</div>