CSS 背景重复图像边缘顶部答案

【问题标题】：CSS Background Repeat Image Margin TopCSS 背景重复图像边缘顶部
【发布时间】：2014-07-07 21:56:06
【问题描述】：

所以我已经知道很多人都问过这个问题。比如这里：

css start repeating background from defined position

我已经正确地尝试了所有这些方法，但它不起作用。我正在尝试从顶部或“正常”位置开始 100 像素的可重复背景。

<style>
.moiraitable{
width:500px;
background-image: url("http://i.imgur.com/owEfTJa.png");
background-repeat: repeat-y;
background-position: center 100px;
background-size: 510px;
}
</style>
<div class="moiraitable">
<img src="http://i.imgur.com/EXYfcOt.png" style="width:500px;margin:0 auto;" />
<p style="text-align:justify;margin:10px 40px;color:white;">
Proin iaculis pharetra tempus. 
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
Vestibulum tincidunt justo nec orci tempus, quis sagittis lacus eleifend. Praesent id justo eget magna lacinia feugiat. In a risus commodo, consectetur diam id, pellentesque quam. Vivamus accumsan vehicula ligula, in tristique lorem scelerisque sed. Aliquam ante urna, bibendum adipiscing tincidunt eu, posuere non turpis. Vivamus vitae porta urna. Suspendisse consequat nisi semper lectus ullamcorper, et tempus augue convallis. Duis ante lacus, bibendum eget diam at, dignissim blandit dui. Nunc placerat purus vel arcu feugiat, viverra semper velit tristique. Proin magna lectus, bibendum ac lectus at, semper sagittis nunc. Duis ornare quam ac convallis sagittis. Nam convallis quis urna eu vestibulum. Aenean vitae pellentesque quam, non ultricies tortor.
</p>
</div>

【问题讨论】：

什么是“不工作”？
我想要完成的事情-.-"
重新阅读。如果标题没有说明，请不要回答。

标签： css background margin repeat

【解决方案1】：

正如 Derek S 所说，尝试使用伪元素：我创建了这个简单的演示，您可以查看。它适用于您的代码。因此，只需更改您需要的内容即可。

我想这就是你要找的。

通过使用：

.moiraitable:before {
    content: "";
    background-image: url("http://i.imgur.com/owEfTJa.png");
    background-position: center top 100px;
    background-repeat: repeat;
    background-size: 100%;
    position: absolute;
    top: 100px;
    width: 500px;
    height: 100%;
    z-index: -10;
}

Demo Fiddle

【讨论】：

工作得更好，你也更友好^^

【解决方案2】：

您提供的示例与您的情况不同，因为您有一个repeat-y。这会导致背景在两个垂直方向上重复，因此背景图像没有“顶部”。

尝试使用this answer中的伪元素

【讨论】：