Question

我需要对多个元素制作一个连续的背景模式。我无法控制元素的高度或数量这是一个例子：

p{ margin:0; padding:1.5em; } .bg{ background-image:url('http://enjoycss.com/webshots/hB_1.png'); }

some text on several lines some text on several lines some text on several lines and another some text on several lines and another some text on several lines and another some text on several lines and another some text on several lines and another some text on several lines some text on several lines and another some text on several lines and another some text on several lines and another

我正在寻找的效果几乎是通过background-attachement:fixed;实现的，但我需要背景来滚动内容。
例如：

p{ margin:0; padding:1.5em; } .bg{ background-image:url('http://enjoycss.com/webshots/hB_1.png'); background-attachment:fixed; }

some text on several lines some text on several lines some text on several lines and another some text on several lines and another some text on several lines and another some text on several lines and another some text on several lines and another some text on several lines some text on several lines and another some text on several lines and another some text on several lines and another

Answer 1

的Javascript

使用少量JavaScript，您可以获得所需的效果。

此方法获取当前高度并添加所有先前的高度，以使元素成为其起始背景位置。

    public DataTable Convert(DataTable dt1)
    {
        try
        {
            var dt2 = dt1.Clone();
            foreach (DataColumn dc in dt2.Columns)
            {
                dc.DataType = Type.GetType("System.String");
            }

            foreach (DataRow row in dt1.Rows)
            {
                dt2.ImportRow(row);
            }

            foreach (DataRow dr in dt2.Rows)
            {
                foreach (DataColumn dc in dt2.Columns)
                {
                    bool value;
                    if (bool.TryParse(dr[dc].ToString(), out value))
                    {
                        dr[dc] = "+";
                    }
                }
            }

            return dt2;
        }
        finally
        {

        }
    }

var lastHeight = 0;
$('.bg').each(function() {
  $(this).css('background-position', '0 -' + lastHeight + 'px');
  var currentHeight = $(this).outerHeight();
  var newPosition = currentHeight + lastHeight;
  lastHeight = lastHeight + currentHeight;
});

p {
  margin: 0;
  padding: 1.5em;
}
.bg {
  background-image: url('http://enjoycss.com/webshots/hB_1.png');
}

Answer 2

您可以让段落min-height / line-height与背景图片大小保持一致：

p {
  margin: 0;
  line-height: 1em;
  background-image: url('http://i.imgur.com/TbQPryV.png');
  background-size: 1em 1em;
  min-height: 1em;
  outline: 1px dashed rgba(0,0,0,0.3);  
}

<p>some text<br>on several lines<br><br>and another</p>
<p>some text<br>on several lines</p>
<p>some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>
<p>some text<br>on several lines<br><br>and another</p>
<p>some text<br>on several lines<br><br>and another<br>some text<br>on several lines<br><br>and another</p>

Answer 3

我没有使用background:fixed。请检查并让我知道它对你有用吗???

Demo

如果没有得到你的任何意见，请告诉我。

在几个元素的连续背景图像模式

3 个答案:

的Javascript