网格不透明度内的链接照片[重复]

Question

我建立了网格照片库。

我把每张照片都变成了链接。

我希望每个背景图像在悬停时都改变它的不透明度。

（网站示例：http://www.natura.co.il/）。

此外，我无法将照片上的文字从上到下移动。

感谢帮助！

HTML：

<div id="flexCatalog">
  <a href="#" class="section" id="r1s1"><p id="gridText" class="pageTexts">Copiers / Combined A3 Black & White</p></a>
  <a href="#" class="section" id="r1s2"><p id="gridText" class="pageTexts">Photocopiers / Multifunction A4 integrated</p></a>
  <a href="#" class="section" id="r2s1"><p id="gridText" class="pageTexts">Color / Multifunction Copiers</p></a>
  <a href="#" class="section" id="r2s2"><p id="gridText" class="pageTexts">Black and white laser printers</p></a>
  <a href="#" class="section" id="r3s1"><p id="gridText" class="pageTexts">Contact Us </p></a>
  <a href="#" class="section" id="r3s2"><p id="gridText" class="pageTexts">Color Laser Printers</p></a>
  <a href="#" class="section" id="r3s3"><p id="gridText" class="pageTexts">Office Supplies</p></a>
</div>

CSS：

#flexCatalog {
  width: 100%;
  height: 600px;
  display: flex;
  flex-wrap: wrap;
}

.section {
  display: block;
  position: relative;
  height: 200px;
}

#r1s1{
  width: calc(100% / 12 * 8);
  background: url("../images/catalog1.jpg");
}

#r1s2{
  width: calc(100% / 12 * 4);
  background: url("../images/catalog2.jpg");
}

#r2s1{
  width: calc(100% / 12 * 6);
  background: url("../images/catalog3.jpg");
}

#r2s2{
  width: calc(100% / 12 * 6);
  background: url("../images/catalog4.jpg");
}

#r3s1{
  width: calc(100% / 12 * 3);
  background: url("../images/catalog5.jpg");

}

#r3s2{
  width: calc(100% / 12 * 4);
  background: url("../images/catalog6.jpg") center center;
}

#r3s3{
  width: calc(100% / 12 * 5);
  background: url("../images/catalog7.jpg");
}

#gridText {
  display: inline-block;
  position: relative;
  top:0 90%;
  margin-left: 10px;
  background: rgba(255, 255, 255, 0.7);
}

Answer 1

您无法更改背景图片的不透明度。你可以使用类似的东西 .section:hover { opacity: ... }文字位置可以使用#gridText { position: absolute; }。

但是有一个更好的方法——在你的标记中添加一个<img /> 标签，而不是使用背景图片。然后文本将自动放置在图像下方。

另外，如果图片是你的内容，而不是装饰，最好使用<img>而不是背景，因为像在谷歌上搜索这张图片和在新标签中打开图片将可用。

Answer 2

.section {
  transition: .2s easeIn;
  will-change: opacity;
}

.section:hover {
  opacity: .9;
}

应该做的伎俩。或者您也可以调试您提供的示例以找到确切的行为