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

【问题标题】：Create a gradient background that looks like two bars创建一个看起来像两个条的渐变背景
【发布时间】：2021-03-27 09:41:00
【问题描述】：

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

我可以通过线性渐变轻松实现一个进度条，但是有没有可能将背景分成两半并让两者都停在特定的百分比？

<!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>

【问题讨论】：

标签： html css linear-gradients

【解决方案1】：

你可以这样做：

#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>

【讨论】：

您好，谢谢您的回答。但是，两个条形都没有完全覆盖高度的一半。顶栏只有大约。底部高度的三分之一
@mnist 你可以随意调整，我只是使用随机值来展示如何控制它们。只需将两者的高度设为 50%
啊，确实！对不起，我错过了这一点。谢谢你的澄清

【解决方案2】：

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

<!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>

【讨论】：

您好，非常感谢您的回答。这看起来与我正在寻找的技巧一模一样。不知道可以为每个背景属性提供多个参数。

【解决方案3】：

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

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

编辑： 使用JS获取文本元素div的高度和宽度，(offsetHeight & offsetWidth)并根据设置每个BG div的高度/宽度到文本 div 的高度。这使它更具动态性。

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>

【讨论】：

非常感谢您的回答。然而，另一个更容易，不需要使用 JS。在我的实际应用程序中，我不只是在背景上有文本，这可能会使事情变得更加复杂。
是的，他是纯 css。最好的...不要忘记将他标记为已接受；）