创建一个看起来像两个条形的渐变背景

Question

我想创建一个看起来有两个进度条的背景，如图所示：

我可以很容易地用线性渐变实现一个进度条，但是有没有可能把背景分成两半，让两者都停在一个特定的百分比？

<!DOCTYPE html>
<html>
  <head>
  <style> 
      #example1 {
         background-color: transparent;
         background-image: linear-gradient(90deg, #eceddc 25%, transparent 25%),
         linear-gradient(180deg, #eceddc 50%, transparent 25%),
         linear-gradient(90deg, #eceddc 50%, transparent 25%); 
      }
  </style>
</head>
<body>
  <div id="example1">
     <h1>Lorem Ipsum Dolor</h1>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>
</body>
</html>

Answer 1

如果你想要和图片一样的结果，你应该使用下面的代码：

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
background-color: transparent;
background-image: linear-gradient(to right, #eceddc 75%, white 25%),
linear-gradient(to right, #eceddc 25%, white 25%);
background-position: right top, right bottom;
background-repeat: no-repeat, no-repeat;
background-size: 100% 50%, 100% 100%;
}
</style>
</head>
<body>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

</body>
</html>

Answer 2

您可以创建两个 DIV 并使用渐变样式来制作您想要的 BG 图像。然后将它们作为子元素添加到包含文本元素的 div 中。然后将文本元素设置为 position: relative，z-index 为 10。

现在，由于此元素可能会在页面上移动，您可以使用 Javascript 通过处理函数获取父元素的位置。然后设置两个eventListeners，一个给load，一个给scroll。使用侦听器调用处理函数，并在加载和滚动时将两个 BG 元素移动到父文本元素的位置。

编辑： 使用JS获取文本元素的高度和宽度div, (offsetHeight & offsetWidth)并根据文字高度div设置每个BGdiv的height/width。这使它更具活力。

window.addEventListener('load', handler, false);
window.addEventListener('scroll', handler, false);
let exOne = document.getElementById('example1');
let exTwo = document.getElementById('example2');
let exThree = document.getElementById('example3');

function handler(event) {

  function getOffset(el) {
    const rect = el.getBoundingClientRect();
    return {
      left: rect.left + window.scrollX,
      top: rect.top + window.scrollY
    };
  }
  exTwo.style.top = getOffset(exOne).top + "px";
  exTwo.style.left = getOffset(exOne).left + "px";
  exTwo.style.height = exOne.offsetHeight + "px";
  exTwo.style.width = exOne.offsetWidth + "px";
  exTwo.style.display = "block";
  exThree.style.top = getOffset(exOne).top + "px";
  exThree.style.left = getOffset(exOne).left + "px";
  exThree.style.height = exOne.offsetHeight / 1.75 + "px";
  exThree.style.width = exOne.offsetWidth + "px";
  exThree.style.display = "block";
}

#example1 {
  background-color: transparent;
  padding: 10px;
}

#example1 p,
#example1 h1 {
  z-index: 10;
  position: relative;
}

#example2 {
  background-color: transparent;
  background: linear-gradient(to top, #0FF 51%, transparent 25%), linear-gradient(to left, #0FF 51%, transparent 25%);
  position: absolute;
  z-index: 1;
  /* display none to remove any glitches shown before load 
  add back to block in JS after load*/
  display: none;
}

#example3 {
  background-color: transparent;
  background: linear-gradient(to bottom, #eceddc 51%, transparent 25%), linear-gradient(to right, #eceddc 51%, transparent 25%);
  position: absolute;
  z-index: 1;
  /* display none to remove any glitches shown before load 
  add back to block in JS after load*/
  display: none;
}

Scroll down
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="example1">
  <div id="example2"></div>
  <div id="example3"></div>
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

Answer 3

您可以按照以下方式进行操作：

#example1 {
  background: 
      linear-gradient(#eceddc 0 0) top    left,
      linear-gradient(#eceddc 0 0) bottom left;
  background-size:
    80% 30%, /* width height of the first bar  */
    40% 70%; /* width height of the second bar */
  background-repeat:no-repeat;
}

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

创建一个看起来像两个条形的渐变背景

Create a gradient background that looks like two bars

html

css

linear-gradients