用单行CSS在图像上进行渐变叠加 [英] Gradient overlay on Image with single line of CSS

问题描述

我正在尝试使用此代码在背景图像上放置渐变

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

推荐答案

首先添加渐变，然后添加图像url，如下所示:

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

或查看下面的代码段:

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

希望这会有所帮助！

这篇关于用单行CSS在图像上进行渐变叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！