我这里有一张图片:
我想在网站 theverge.com 中复制 css 样式(见下图)
我将在我的博客(主页)中使用它,因为我正在尝试复制 theverge.com 网站的内容。这就像在半透明渐变和特色图像上显示帖子的标题和作者的名字。
请帮忙。
这是我的html结构
http://jsfiddle.net/Kareen/kwPP8/2/
<div class="content">
<h3>Some Title Goes Here</h3>
<div>Author: Bill Jones</div>
<img src="http://lorempixel.com/300/200/nature/5" />
</div>
最佳答案
使用当前结构(您指出这是必需的),位于主 div 之上的伪元素就可以解决问题。
注意:我只是在解决覆盖问题。您仍然需要定位文本元素。 理想情况下,重构 HTML 将是最好的过程。
CSS
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.content {
position: relative;
margin:10px;
border:1px solid grey;
display: inline-block;
}
.content img {
display: block;
}
.content:after {
position: absolute;
content:"";
height:100%;
width:100%;
top:0;
left:0;
background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,0,0,0.65) 100%);
}
需要前缀,浏览器支持可能是 IE9+(非滤镜渐变)
关于css - 如何在 CSS 中的图像中添加渐变/滤镜,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22271686/