0

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

顺便说一句，这是代码：

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

文本区域中编号和分隔的行

重复线性渐变教程

4

1 回答 1

1

因为您正在滚动的元素是textarea, not .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>

于 2021-04-20T07:53:13.583 回答