部分背景图像和线性渐变不起作用

时间:2018-01-21 18:17:08

标签: html css css3 linear-gradients

我正在尝试使用线性渐变添加背景图像。

如果我添加没有线性渐变的图像,则会出现图像。一旦我添加线性渐变,它们都不起作用,并且默认返回到该部分中的原始背景颜色。

在下面的CSS中,我尝试将背景图像组合成一个CSS声明并用逗号分隔。



.education {
  background: linear-gradient(rgba(141, 153, 174, 0.8), (rgba(141, 153, 174, 0.5)), url("samuel-beckett-bridge.jpg") no-repeat fixed);
  background-size: cover;
}

<!-- // Education -->
<section id="education" class="education">
  <div class="content-wrap">
    <h2>Education</h2>

    <!-- School details: copy this whole block to add more schools. -->
    <h3>School name 2017 - present</h3>
    <p>Designation received</p>

    <!-- Add as many paragraphs as you need. -->
    <p>Summary.</p>
    <!-- End of school details. -->
  </div>
</section>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:4)

绝对是:

.education {
  background: linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5)), url("samuel-beckett-bridge.jpg") no-repeat fixed;
  background-size: cover;
}

实时解决方案:https://jsfiddle.net/v47dk902/

答案 1 :(得分:2)

您在后台css中插入了一个额外的花括号。请使用以下

替换您的背景css
background: linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5)), url("samuel-beckett-bridge.jpg") no-repeat fixed);

由于

答案 2 :(得分:0)

如果使用透明背景图像,则需要切换顺序,以便渐变出现在图像下方。您将需要首先列出图像,重复和定位信息,然后是逗号,然后是渐变信息。

因此,以上面的代码为例:

.education {
    background: url("samuel-beckett-bridge.jpg") no-repeat fixed, linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5));
    background-size: cover;
}