Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

html - 如何在图像悬停时创建深色淡入淡出+文字？

In lại Tác giả: Walker 123 更新时间：2023-11-28 17:01:43 27 4
mua khóa gpt4 Nike

在尝试获得某种效果时遇到困难:

我有一张图片。我想将鼠标悬停在它上面。它应该变黑并弹出一些文本。

Here is an example

例子^

执行此操作最简单/最简单的设置是什么？最好只有 HTML 和 CSS

注意:该元素需要在 CSS 中设置 hình nền.

    .thumbnail {
    background-image: url(potato.jpeg);
    chiều cao: 400px;
    width: 450px;
}

.thumbnail:hover {
    background: rgb(0, 0, 0);
    chiều cao: 400px;
    width: 450px;
    độ mờ: 0,5;
    transition: 0.8s;
}

\




<đầu>


Xem sitemap của VNExpress


câu trả lời hay nhất

您应该为叠加层使用一个单独的元素，在我的示例中是一个子元素。由于 opacity: 0

，只有悬停状态可见，常规状态不可见 

.thumbnail {
  background-image: url(https://placehold.it/450x400/fa0);
  chiều cao: 400px;
  width: 450px;
}
.lớp phủ {
  background: rgb(0, 0, 0);
  chiều cao: 400px;
  width: 450px;
  độ mờ: 0;
  transition: 0.8s;
}
.thumbnail:hover .overlay {
  độ mờ: 0,5;
}

当涉及到根本不应该有不透明度的文本时，它会变得有点复杂:在下面的示例中，覆盖元素具有半透明的背景颜色，并且当 opacity: 1 parent 悬停。这样文本在悬停时没有不透明度，但由于其自身的不透明度设置为 0.5，背景仍然有:

.thumbnail {
  background-image: url(https://placehold.it/450x400/fa0);
  chiều cao: 400px;
  width: 450px;
}
.lớp phủ {
  background: rgba(0, 0, 0, 0.5);
  chiều cao: 400px;
  width: 450px;
  độ mờ: 0;
  transition: 0.8s;
  font-size: 36px;
  màu sắc: #fff;
}
.overlay:hover {
  độ mờ: 1;
}
SOME TEXT

关于html - 如何在图像悬停时创建深色淡入淡出+文字？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52562579/

27 4 0
Đề xuất bài viết: html - 如何用`display :table-cell` over another div with `display:table-cell?` 重叠一个div的子元素
Đề xuất bài viết: python - 错误 : TypeError: 'str' object cannot be interpreted as an integer while trying to pick a random winner (Python)
Đề xuất bài viết: javascript - CSS 百分比不正确
Đề xuất bài viết: python - Python Click 库如何处理默认为标志和 True 的选项？
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com