更改链接悬停纯 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>