Question

我现在已经有一段时间了，似乎无法得到我正在寻找的行为。

这里的骨头就是我所拥有的：

HTML

<ul>
<div class="container">
    <li class="preview-image" style="background-image:url(https://www.w3schools.com/Html/pic_trulli.jpg); height: 100px;">
      <div class="txt-container">
        <a>Title</a>
        <p>Desc</p>
      </div>
      <a class="btn">Button</a>
    </li>
  </div>
</ul>

背景图片网址必须作为HTML的一部分完成，因为我循环浏览项目列表，每个项目都有一个图像属性。上面的图像URL是示例图像。在实际代码中，它是{{ item.image }}，只能通过HTML访问。

CSS

.preview-image {
  opacity: 1;
} 
.container:hover .preview-image {
  opacity: 1;
  background-repeat: no-repeat;
  background-size: cover;
}
.container:hover .txt-container {
  opacity: 0;
}
.txt-container {
  opacity: 1;
  font-weight: bold;
  color: white;
}
.btn {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

这fiddle接近我想要的。我希望bg图像占据整个li。我只想在li（或包含元素）的悬停时看到图像。在悬停时，Title和Desc应该被隐藏，这样它们就不会干扰图像的查看。 Button应始终保持可见状态。我正在寻找的结果正是这个小提琴的行为，除了图像只能在悬停时看到。

我无法在li本身设置不透明度或可见性，因为它上面有多个类。我只希望能见度影响背景图像。我也试过制作div并将其放在li内，但我无法再将其填入li空间。有没有办法可以做到这一点？

Answer 1

我不确定我是否理解你的问题，但试试这个：

 <ul class="nopadding">
<div class="container">
    <li class="preview-image" style="background-image:url(https://www.w3schools.com/Html/pic_trulli.jpg); height: 100px;">
      <div class="txt-container">
        <a>Title</a>
        <p>Desc</p>
      </div>
      <a class="btn">Button</a>
    </li>
  </div>
</ul>


.preview-image {
  opacity: 0;
  width: 100vw;
}
.nopadding {
  padding: 0!important;
} 
.container:hover .preview-image {
  opacity: 1;
  background-repeat: no-repeat;
  background-size: cover;
}
.container:hover .txt-container {
  opacity: 0;
}
.txt-container {
  opacity: 1;
  font-weight: bold;
  color: white;
}
.btn {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

编辑：然后尝试：

.preview-image {
  background-image: none;
  width: 100vw;
}
.nopadding {
  padding: 0!important;
} 
.container:hover .preview-image {
  opacity: 1;
  background-repeat: no-repeat;
  background-size: cover;
  background-image:url(https://www.w3schools.com/Html/pic_trulli.jpg); height: 100px;
}
.container:hover .txt-container {
  opacity: 0;
}
.txt-container {
  opacity: 1;
  font-weight: bold;
  color: black;
}
.btn {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

 <ul class="nopadding">
<div class="container">
    <li class="preview-image">
      <div class="txt-container">
        <a>Title</a>
        <p>Desc</p>
      </div>
      <a class="btn">Button</a>
    </li>
  </div>
</ul>

编辑：CSS中没有背景图片：

.preview-image {
  background-size: 0 0;
  width: 100vw;
}
.nopadding {
  padding: 0!important;
} 
.container:hover .preview-image {
  opacity: 1;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100px;
}
.container:hover .txt-container {
  opacity: 0;
}
.txt-container {
  opacity: 1;
  font-weight: bold;
  color: black;
}
.btn {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

 <ul class="nopadding">
<div class="container">
    <li class="preview-image" style="background-image:url(https://www.w3schools.com/Html/pic_trulli.jpg);">
      <div class="txt-container">
        <a>Title</a>
        <p>Desc</p>
      </div>
      <a class="btn">Button</a>
    </li>
  </div>
</ul>

Answer 2

只需在li标记中添加一个类，然后就可以使用CSS仅在悬停时显示背景图像。像这样：

HTML：

<li class="img-hover">
  ...
</li>

CSS：

.img-hover:hover {
   background-image: url("https://www.w3schools.com/Html/pic_trulli.jpg");
 }

隐藏图片，直到悬停

2 个答案: