可以通过CSS渐变从任意点开始绘制垂直线吗？

Question

我可以使用线性渐变或重复线性渐变在背景中画一条直线，例如：

   background-color: linen;
   background-image: repeating-linear-gradient(90deg, black, black 1px, linen 1px, linen 100px);
   background-position: 100px;

我会得到类似这样的东西： 我的问题是 - 从任意点绘制这样的线，而不是从顶部（或底部）开始，比如说，我想从容器中间向上绘制线条，最好的方法是什么？

这是否可能呢？

到目前为止，我尝试过的是：我已经检查了背景大小或背景位置是否可以改变它，但还是没有成功。

- shabunc

Answer 1

作为一个创建图像的线性渐变，我们可以把它看作一个图像，所以一种非常简单的方法是将其与背景大小/background-repeat结合使用。

div {
  width: 700px;
  height: 100px;
  background-color: linen;
  background-size: 50px 50px;
  background-repeat: repeat-x;
  background-image: linear-gradient(to right, black 1px, transparent 1px, transparent),
                    linear-gradient(to right, black 1px, transparent 1px, transparent),
                    linear-gradient(60deg, transparent 25px, black 25px, transparent 26px, transparent);
  background-position: left 30px top,
                       left 5px bottom,
                       left 5px center;
}

<div></div>

- Asons

Answer 2

使用双重渐变，第一个是从底部到顶部的垂直渐变，颜色从背景色到透明，第二个是从右到左的重复线性渐变。请保留HTML标签。

div {
  width: 700px;
  height: 100px;
  background: linear-gradient(to top, ivory, ivory 50px, transparent 50px, transparent), repeating-linear-gradient(to right, black, black 1px, ivory 1px, ivory 100px);
}

<div></div>

- cjl750

---

非常整洁 - 甚至没有考虑过嵌套渐变。 - shabunc

Answer 3

使用子元素，为每个子元素设置不同的背景，并控制它们之间的比例。

在下面的示例中，我使用了您的背景，但控制了“起点”，这通常是不可能使用repeating-linear-gradient实现的。 repeating-linear-gradient()将方向作为第一个参数。方向可以是角度（如您指定的），也可以是边缘（to left，to right...）或角落（to left bottom，...）。这意味着它从相反的侧面/角落开始。它不能从元素内的任意点开始。

但这并不意味着您不能有一个或多个子元素从它们连接的侧面向外开始背景：

.custom-origin {
  display: flex;
  flex-wrap:wrap;
  height: 100vh;
}
.custom-origin div {
  background-image: repeating-linear-gradient(to left, black, black 1px, linen 1px, linen 100px);
  flex-grow: 1;
  min-width: 33.33%;
}
.custom-origin div:nth-child(2) {
  background-image: repeating-linear-gradient(to right, white, white 99px, black 1px, black 100px);
}
.custom-origin div:first-child {
  max-width: 33.33%; /* this sets the position of your origin. 
                     * If not set, it will be the exact half of the parent,
                     * in this example 
                     */ 
}
.custom-origin .full {
  min-width: 100%;
  background-image: none;
  background-color: linen;
}
body {
  margin: 0;
}

<div class="custom-origin">
  <div></div>
  <div></div>
  <div class="full"></div>
</div>

通过控制子元素的大小，您可以控制如何应用背景图像。为了勾勒“位置”，我将其中一个子元素的linen更改为white。

- tao

Answer 4

这更像是一个技巧性的操作。

它会将渐变垂直分成十个10%的部分。

您可以通过编辑rgba中的alpha通道来切换每个部分，使其为1或0。 在Edge和IE中不受支持。

.container {
  height: 50px;
  background-color: linen;
}

.grad {
  height: 100%;
  background-image: repeating-linear-gradient(90deg, black, black 1.5px, linen 1.5px, linen 100px);
}

.middle-to-bottom {
  -webkit-mask-image: linear-gradient(
  rgba(0, 0, 0, 1)10%,
  rgba(0, 0, 0, 1)20%, 
  rgba(0, 0, 0, 1)30%, 
  rgba(0, 0, 0, 1)40%,
  rgba(0, 0, 0, 0)50%,
  rgba(0, 0, 0, 0)60%, 
  rgba(0, 0, 0, 0)70%,
  rgba(0, 0, 0, 0)80%, 
  rgba(0, 0, 0, 0)90%, 
  rgba(0, 0, 0, 0)100%);
}

.middle-to-top {
  -webkit-mask-image: linear-gradient( 
  rgba(0, 0, 0, 0)10%,
  rgba(0, 0, 0, 0)20%, 
  rgba(0, 0, 0, 0)30%, 
  rgba(0, 0, 0, 0)40%,
  rgba(0, 0, 0, 0)50%,
  rgba(0, 0, 0, 1)60%, 
  rgba(0, 0, 0, 1)70%,
  rgba(0, 0, 0, 1)80%, 
  rgba(0, 0, 0, 1)90%, 
  rgba(0, 0, 0, 1)100%);
}

.middle {
  -webkit-mask-image: linear-gradient( 
  rgba(0, 0, 0, 0)10%,
  rgba(0, 0, 0, 0)20%, 
  rgba(0, 0, 0, 0)30%, 
  rgba(0, 0, 0, 1)40%,
  rgba(0, 0, 0, 1)50%,
  rgba(0, 0, 0, 1)60%, 
  rgba(0, 0, 0, 0)70%,
  rgba(0, 0, 0, 0)80%, 
  rgba(0, 0, 0, 0)90%, 
  rgba(0, 0, 0, 0)100%);
}


.random {
  -webkit-mask-image: linear-gradient( 
  rgba(0, 0, 0, 0)10%,
  rgba(0, 0, 0, 0)20%, 
  rgba(0, 0, 0, 1)30%, 
  rgba(0, 0, 0, 1)40%,
  rgba(0, 0, 0, 0)50%,
  rgba(0, 0, 0, 0)60%, 
  rgba(0, 0, 0, 0)70%,
  rgba(0, 0, 0, 1)80%, 
  rgba(0, 0, 0, 1)90%, 
  rgba(0, 0, 0, 0)100%);
}

h4 {
  text-align:center;
  margin:.5em auto;
  padding:2px;
}

<h4>middle to top</h4>
<div class="container">
  <div class="grad middle-to-bottom"></div>
</div>

<h4>middle to bottom</h4>
<div class="container">
  <div class="grad middle-to-top"></div>
</div>

<h4>middle</h4>
<div class="container">
  <div class="grad middle"></div>
</div>

<h4>random</h4>
<div class="container">
  <div class="grad random"></div>
</div>

- I haz kode