如何使用 CSS 在懸停時向圖像添加帶有文字的黑色透明覆蓋層？

使用CSS 在懸停時為影像添加黑色透明疊加

使用CSS 可以在懸停時在影像上建立黑色透明。以下是完成此操作的綜合指南：

使用偽元素

為了避免封閉的 img 元素上的覆蓋元素出現問題，您可以在其地方。將img 元素包裝如下：

<div class="image">
  <img src="image.jpg" alt="" />
</div>

設定CSS：

.image {
  position: relative;
  width: 400px;
  height: 400px;
}
.image img {
  width: 100%;
  vertical-align: top;
}
.image:after {
  content: '\A';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 1s;
}
.image:hover:after {
  opacity: 1;
}

在懸停時加入文字

為簡單起見，請包含文字作為偽元素的內容值：

.image:after {
  content: 'Your Text';
  color: #fff;
}

或者，在data-* 屬性中設定文字以實現唯一的文字顯示：

.image:after {
  content: attr(data-content);
  color: #fff;
}

<div data-content="Text to Display" class="image">
  <img src="image.jpg" alt="" />
</div>

組合疊加和文字

單獨的樣式允許獨立定位元素:

.image:after, .image:before {
  position: absolute;
  opacity: 0;
  transition: all 0.5s;
}
.image:after {
  content: '\A';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}
.image:before {
  content: attr(data-content);
  width: 100%;
  color: #fff;
  z-index: 1;
  bottom: 0;
  padding: 4px 10px;
  text-align: center;
  background: #f00;
  box-sizing: border-box;
}
.image:hover:after, .image:hover:before {
  opacity: 1;
}

以上是如何使用 CSS 在懸停時向圖像添加帶有文字的黑色透明覆蓋層？的詳細內容。更多資訊請關注PHP中文網其他相關文章！