Question

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

我已经真正地尝试了所有这些方法，并且它无法正常工作。我试图让一个可重复的背景从顶部开始100px或正常＆＃39;位置。

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

Answer 1

您提供的示例与您的情况不同，因为您有repeat-y。这导致背景在两个垂直方向上重复，因此没有＆＃34;顶部＆＃34;到你的背景图片。

尝试使用this answer

中的伪元素

Answer 2

正如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

CSS背景重复图像边缘顶部

2 个答案: