更改链接悬停纯CSS上的背景图片

Question

我正在尝试在我的网站上获得这种效果。例如：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>

Answer 1

您可以添加一些不透明度过渡，如下所示：

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>