CSS背景重複圖片保證金頂部

-2

所以我已經知道很多人都問過這個。如這裏：CSS背景重複圖片保證金頂部

css start repeating background from defined position

我從字面上嘗試了所有的這些方法，正確的，而且它不工作。我試圖從頂部或「正常」位置開始重複背景100px。

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

來源

2014-05-19 user3024230

什麼是「不工作」？ –

我試圖完成的是什麼-.-「 – user3024230

...那就是？ –

至於什麼德里克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

來源

2014-05-19 20:30:57 RubberPoint

工作好多了，你很多友好的^^ – user3024230

這很好聽:)很高興我可以幫助 – RubberPoint

您提供的示例與您的情況不同，因爲您有repeat-y。這會導致背景在兩個垂直方向重複，因此背景圖像沒有「頂部」。我創造了這個簡單的演示，你可以檢查出：使用僞元素以this answer

來源

2014-05-19 20:12:30

CSS背景重複圖片保證金頂部

回答

相關問題