Question

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

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

我正在获取图片，但未应用渐变

Answer 1

首先添加渐变，然后添加图像网址，如下所示：

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

或者查看下面的代码段：

＆＃13;

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

＆＃13;

<div class="bg"></div>

＆＃13;

希望这有帮助！

Answer 2

＆＃13;

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;
  
}

＆＃13;

<div></div>

＆＃13;

使用单行CSS在Image上叠加渐变

2 个答案: