CSS 可以在圖片懸停時創建透明的黑色疊加層嗎？-css教學-PHP中文網

CSS 可以在圖片懸停時創建透明的黑色疊加層嗎？

Linda Hamilton

發布： 2024-12-10 16:44:11

原創

373 人瀏覽過

Can CSS Create a Transparent Black Overlay on Image Hover?

使用CSS 對圖像懸停進行黑色透明疊加：深入方法

查詢：

我可以創建一個透明的黑色疊加層，當滑鼠懸停在圖像上時僅使用CSS？

回覆：

是的，您可以使用 CSS 實現圖片懸停時的透明黑色疊加效果。操作方法如下：

使用偽元素的替代方法：

您可以在影像上利用偽元素，而不是使用覆蓋元素。此方法提高了響應能力並多功能性：

HTML：

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

登入後複製

CSS：

.image {
  position: relative;
  /* Optional dimensions */
}

.image img {
  width: 100%;
  vertical-align: top;
}

.image:after {
  content: '\A';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 1s;
}

.image:hover:after {
  opacity: 1;
}

登入後複製

CSS：

說明：
位置：相對於.image 元素允許偽元素相對於其父元素定位自身。
vertical-align: top 修復影像上的基線對齊方式。

:after 偽元素使用以下指令建立覆蓋層絕對定位和黑色半透明背景。應用不透明度過渡以實現平滑過渡

.image:after {
  content: 'Hover Text';
  /* Other styling... */
}

登入後複製

在懸停時添加文字（可選）：要在懸停時添加文字（可選）：要在懸停時添加文字（可選）：要在懸停時添加文字（可選）：要在懸停時顯示文本，請將偽元素的content 屬性設為所需的文字：

以上是CSS 可以在圖片懸停時創建透明的黑色疊加層嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！