在上方添加透明的颜色叠加 <img> 标签
[英]Add transparent color overlay over an <img> tag
问题描述
I want to add a transparent black overlay over an img tag with some text in it, like in the example screenshot below. 
我想在img tag上添加透明的黑色覆盖层，并在其中img tag一些文本，如下面的示例屏幕截图所示。 Ideally only with HTML and CSS . 理想情况下仅适用于HTML和CSS 。
I have been searching for hours and can't find anything. 我已经搜寻了几个小时，找不到任何东西。
I know this could be easily done if the image is used as a background, but this isn't an option for us (SEO reasons). 我知道如果将图像用作背景可以很容易地做到这一点，但这对我们来说不是一个选择（SEO原因）。
2 个解决方案
解决方案1
4 已采纳 2017-05-16 22:47:23
That shouldn't be so bad. 那应该没那么糟。 Would something like this work? 这样的事情行吗？ First some HTML: 首先一些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>
解决方案2
1 2017-05-16 22:50:32
Mic.com used the following code: Mic.com使用以下代码：
.article-card-8col__overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: -webkit-linear-gradient(top,transparent,rgba(0,0,0,.9));
background: linear-gradient(to bottom,transparent,rgba(0,0,0,.9));
}
I changed it slightly. 我稍作更改。 You could also use their code with on a sibling div element of the image & the parent having position: relative; 您也可以在图片的同级div元素上使用它们的代码，并且父元素的position: relative; or use one like mine. 或使用类似我的
.wrapper { position: relative; display: inline-block; } .wrapper:after{ content: ""; background: -webkit-linear-gradient(transparent,rgba(0,0,0,.9)); background: linear-gradient(transparent,rgba(0,0,0,.9)); position: absolute; display: block; width: 100%; top: 0; bottom: 0; }
<div class="wrapper"> <img src="https://thumbs.mic.com/MTAxZmJlOGIyMSMvYzNOMU1wRTJjMEdyWUZySS1UVjNnMV9LVkZRPS8xMngyNzM6NDk4MHgyODA5LzgwMHg0NTAvZmlsdGVyczpmb3JtYXQoanBlZyk6cXVhbGl0eSg4MCkvaHR0cHM6Ly9zMy5hbWF6b25hd3MuY29tL3BvbGljeW1pYy1pbWFnZXMvanQwY2dmZXZ5aW10aGhqZzBtYXc4cHZxNndrZmdwbmNqNzQzeTB4YmhybWtyOGc0YXYxcHVidWVldzU0OWIwcC5qcGc.jpg" /> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.