gpt4 book ai didi

html - 在 标签上添加透明颜色覆盖

转载 作者:行者123 更新时间:2023-11-28 15:53:20 25 4
gpt4 key购买 nike

我想在 img 标签 上添加一个透明的黑色覆盖层,其中包含一些文本,如下面的示例屏幕截图所示。理想情况下仅使用 HTMLCSS

我已经搜索了几个小时,但找不到任何东西。

我知道如果将图像用作背景,这可以很容易地完成,但这不是我们的选择(SEO 原因)。

example overlay screenshot

最佳答案

那应该不会那么糟糕。这样的事情行得通吗?首先是一些 HTML:

 #container {
position: relative;
width: 600px;
height: 400px;
}

#someimg {
postion: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#overlay {
position: absolute;
top: 0;
left: 0;
clear: float;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
color: #ffffff;
}
   <html>
<body>
<div id="container">
<img id="someimg" src="https://www.w3schools.com/w3images/fjords.jpg"</img>
<div id="overlay">This is some text in an overlay</div>
</div>
</body>
</html>

关于html - 在 <img> 标签上添加透明颜色覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44012674/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com