如何制作局部附加的重复线性渐变

Question

我最近一直在尝试制作一个使用重复线性渐变来分隔线条的文本区域，但是，当我滚动时，渐变没有附加到文本框。我做错了什么吗？

顺便说一句，这是代码：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div class="TextareaWrapper"><textarea id="Text" cols="1500"></textarea></div>
  </body>
</html>
<style>
  #Text
  {
    background: url("https://www.linkpicture.com/q/2cOaJ-2.png");
    background-size: 30px 33325px;
    background-position: 0px 11px;
    background-attachment: local;
    background-repeat: no-repeat;
    padding-left: 35px;
    padding-top: 10px;
    border-color:#ccc;
    font-size: 15px;
    display: block;
    margin: 0px;
    line-height: 1.5;
    width: 400px;
    height: 225px
  }
  .TextareaWrapper
  {
    display: inline-block;
    background-image: repeating-linear-gradient(to bottom, #ffffff, #f0f0f0 50%);
    background-attachment: local;
    background-size: 100% 45px;
    background-position: left 10px;
  }
</style>
<script>

</script>

此外，这里是我使用的一些 URL：

Repeating Linear Gradient Tutorial

Answer 1

因为您正在滚动的元素是 textarea，而不是 .TextareaWrapper，所以 background-attachment: local 不能为其子元素应用滚动。

您可以将这两个背景图像合并为一个 background 属性，使用逗号分隔的速记，您甚至不再需要 TextareaWrapper。

background: url("https://www.linkpicture.com/q/2cOaJ-2.png") 0px 11px/30px 33325px local no-repeat, repeating-linear-gradient(to bottom, #ffffff, #f0f0f0 50%) left 10px/100% 45px local;

这两个背景将合并为一个图像以共享相同的滚动位置：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <div class="TextareaWrapper"><textarea id="Text" cols="1500"></textarea></div>
  </body>
</html>
<style>
  #Text
  {
    background: url("https://www.linkpicture.com/q/2cOaJ-2.png") 0px 11px/30px 33325px local no-repeat, repeating-linear-gradient(to bottom, #ffffff, #f0f0f0 50%) left 10px/100% 45px local;
    padding-left: 35px;
    padding-top: 10px;
    border-color:#ccc;
    font-size: 15px;
    display: block;
    margin: 0px;
    line-height: 1.5;
    width: 400px;
    height: 225px
  }
</style>
<script>

</script>

如何制作局部附加的重复线性渐变

How do I make local attached repeating linear gradients

html

css

background-attachment

repeating-linear-gradient