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

Question

我正在尝试添加具有线性渐变的背景图片。

如果我添加没有线性渐变的图像，图像就会出现。一旦我添加了线性渐变，它们都不起作用，并且默认恢复为该部分中的原始背景色。

在下面的 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>

Answer 1

您在背景中插入了额外的大括号 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);

谢谢

Answer 2

绝对是:

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

Answer 3

如果您使用的是透明背景图片，则需要切换顺序，使渐变显示在图片下方。您需要先列出图像、重复和定位信息，然后是逗号，然后是渐变信息。

因此，以上面使用的代码为例：

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

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

Section background image and linear gradient not working

html

css

linear-gradients