Gradient overlay on Image with single line of CSS

心不动则不痛 提交于 2020-12-26 11:20:03

问题


I'm trying to put a gradient on a background image using this code

background: url('../img/newspaper.jpeg'),linear-gradient(to bottom right,#002f4b, #dc4225);
background-size: cover;

I'm getting the image but the gradient is not being applied


回答1:


Add the gradient first and then add the image url, just like this:

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");

Or look at the snippet below:

.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>

Hope this helps!




回答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>


来源:https://stackoverflow.com/questions/40445740/gradient-overlay-on-image-with-single-line-of-css

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!