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

问题描述

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

顺便说一下，这是代码：

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

此外，以下是我使用的一些网址：

Numbered and separated rows in a textarea

Repeating Linear Gradient Tutorial

解决方法

因为您滚动的元素是 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,#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>

background-attachment html repeating-linear-gradient