Question

我建立了网格照相馆。

我打开了每张照片进行链接。

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

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

此外，我无法将文字从顶部移到底部。

感谢助手！

HTML：

static

CSS：

<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>

Answer 1

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

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

此外，如果图像是您的内容，而不是装饰的一部分，则最好使用<img>代替背景，因为那样的话例如在Google搜索此图片和在新标签页中打开图片。

Answer 2

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

.section:hover {
  opacity: .9;
}

应该做到这一点。或者，您也可以调试提供的示例以查找确切的行为

链接的照片在网格内部不透明

2 个答案: