时间戳

首页 > 解决方案 > 试图产生褪色的利润

html - 试图产生褪色的利润

问题描述

我正在尝试在我的网站上为左右边距产生一个褪色的渐变，但我能想到的唯一方法是在这个小提琴上找到：https ://jsfiddle.net/btzr1vox/

body {
   background-color: #fafafa;
}
 
.box-1 {
    background-image: linear-gradient(to left, rgb(250, 250, 250) 0%, rgb(0, 0, 0, 1) 15%);
    display: inline-block;
    width: 50%;
}

.box-2 {
    background-image: linear-gradient(to left, rgb(0, 0, 0) 85%, rgb(250, 250, 250, 1) 100%);
    float: left;
    width: 50%;
}

.row {
  max-width: 114rem;
  margin: 0 auto;
}

.col-1-of-2 {
    width: calc((100% - #{6rem}) / 2);
}

.color {
  color: white;
}

.column-1 {
  margin-right: 3rem;
}

.column-2 {
  margin-left: 3rem;
}

它可以工作，但是它将页面分成我不想要的列，因为我必须为网站的每个部分重复该过程。这看起来很麻烦，特别是如果我想改变列的宽度，比如一个块只占页面的 1/3，而另一个 2/3，等等。

标签： htmlcsssass

解决方案

我建议将白色渐变与包含文本的元素分开，这样它们就不会相互依赖。更简单：如果您创建两个元素并position: absolute;在它们上应用属性，您可以在任何地方重复使用它们：在整个背​​景之上或每个部分。

如果您遇到覆盖渐变的文本问题，您当然可以将保存文本的元素padding设置width为与渐变相同的值，这样它们就不会碰到它们。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  background-color: #36393f;
}

.gradient-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 100%;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.gradient-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 100%;
  background-image: linear-gradient(
    to left,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}
<div class="gradient-left"></div>
<div class="gradient-right"></div>

推荐阅读