css - 如何仅使用有效的 HTML 和 CSS 实现此渐变

Question

我对与 EE 移动网络 ( https://ee.co.uk/ ) 网站(见附件截图)主页轮播类似的渐变样式感兴趣，但我注意到渐变是图像的一部分。我想使用 CCS 实现渐变，只需要最少的 HTML 标记。

谢谢

Answer 1

如果你的意思是黑色到透明的渐变，在图像的顶部添加一个 div 并添加 css 类:

.gradient { background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,1) 43%, rgba(0,0,0,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(43%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 43%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 43%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 43%,rgba(0,0,0,0) 100%); background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 43%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); }

这应该适用于大多数浏览器。

您的 html 应该是这样的:

<div class="image">
    <img src="myImage.jpg">
    <div class="gradient"><p>My caption</p></div>
</div>

现在在 .image、.image img 和 .gradient 上设置 CSS 大小，并确保 .gradient 是 position:absolute

.image { width:600px; height:300px; position:relative; }
.image img { width:600px; height:300px; position:relative; z-index:0; }
.image .gradient { width:400px; height:300px; position:absolute; top:0; left:0; background: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,1) 43%, rgba(0,0,0,0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(43%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); background: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 43%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 43%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 43%,rgba(0,0,0,0) 100%); background: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,1) 43%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); }