使用单行 CSS 对图像进行渐变叠加
Posted
技术标签:
【中文标题】使用单行 CSS 对图像进行渐变叠加【英文标题】:Gradient overlay on Image with single line of CSS 【发布时间】:2017-03-19 15:34:42 【问题描述】:我正在尝试使用此代码在背景图像上添加渐变
background: url('../img/newspaper.jpeg'),linear-gradient(to bottom right,#002f4b, #dc4225);
background-size: cover;
我正在获取图像,但没有应用渐变
【问题讨论】:
【参考方案1】:先添加渐变,再添加图片url,就像这样:
background: linear-gradient(rgba(244, 67, 54, 0.95),
rgba(33, 150, 243, 0.75),
rgba(139, 195, 74, 0.75),
rgba(255, 87, 34, 0.95)),
url("http://placehold.it/200x200");
或者看下面的sn-p:
.bg
background: linear-gradient(
rgba(244, 67, 54, 0.45),
rgba(33, 150, 243, 0.25),
rgba(139, 195, 74, 0.25),
rgba(255, 87, 34, 0.45)),
url("http://placehold.it/200x200");
width: 200px;
height: 200px;
<div class="bg"></div>
希望这会有所帮助!
【讨论】:
【参考方案2】:div
width: 350px;
height: 350px;
background: linear-gradient(to bottom right, rgba(0,47,75,.9), rgba(220,66,37,.9)), url(http://placehold.it/350x350);
background-size: cover;
<div></div>
【讨论】:
以上是关于使用单行 CSS 对图像进行渐变叠加的主要内容,如果未能解决你的问题,请参考以下文章