Question

我一直在寻找一些答案来解决我在开发网页时发现的问题。我正在尝试创建一个叠加渐变背景，就像我在网上找到的这些例子一样：

http://meridianthemes-demo.net/the-traveler/

http://demo.themeruby.com/innovation_personal/

我的代码目前看起来像这样：

.image-bg{
    width: 100%;
    height: 100%;
    margin: 0px;
    background: url('../images/background.jpg') center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    &:before {
        content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-image: linear-gradient(to bottom right, #e2dce1, #e8d5e4);
		opacity: .8;

    }
}

<body class="image-bg">
    <div class="container" id="main">

        <div class="logo">
            <h1>Background Overlay Image</h1>
        </div> <!-- ./ logo -->

    </div> <!-- ./Container -->

...

有关如何将代码更改为类似于我上面提到的主题的任何想法？

提前致谢！

Answer 1

您可以使用rgba（红色/绿色/蓝色/ Alpha）颜色创建渐变，而不是在元素上使用具有不透明度的纯色渐变，其中渐变的一侧可以是半透明的而另一个是不透明的。

我修改了你的代码，以展示如何解决此问题。

此外，您在CSS（&:before）中嵌套，这在本机CSS中不起作用 - 只有像SCSS这样的预处理器。我把它格式化为下面的工作。

.image-bg {
  width: 100%;
  height: 100%;
  margin: 0;
  background: url('http://i.imgur.com/NRdrfQw.jpg') center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.image-bg::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 1));
    z-index: -1;
  }

  .container {
    height: 800px;
  }

<body class="image-bg">
  <div class="container" id="main">
    <div class="logo">
      <h1>Background Overlay Image</h1>
    </div>
    <!-- ./ logo -->
  </div>
  <!-- ./Container -->
</body>

Answer 2

您应该使用rgba作为背景渐变而不是不透明度。不透明度会使身体内的每个元素都继承不透明度。

当你在你的例子中右下角时，我在下面的例子中将渐变旋转了135度。

我还建议您将position:relative应用于容器，因为渐变将覆盖正文中的任何内容。除非这是预期的效果？

＆＃13;

.image-bg {
  width: 100%;
  height: 100%;
  margin: 0px;
  background: url('http://lorempixel.com/output/nature-q-c-1313-1259-2.jpg') center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.image-bg:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(135deg, rgba(226, 220, 225, 0.37) 0%, rgba(232, 213, 228, 1) 100%);
}
.container {
  position: relative;
}

＆＃13;

<body class="image-bg">
  <div class="container" id="main">

    <div class="logo">
      <h1>Background Overlay Image</h1>
    </div>
    <!-- ./ logo -->

  </div>
  <!-- ./Container -->

＆＃13;

如何创建叠加渐变背景？

2 个答案: