添加兩分的div之間的圖像，而不會影響的div

Question

我想不出一個一致的方法來行之間增加一個小的圖像

比方說，我有這個網站

<div class="row"> 
    ... 
</div> 
<div class="row"> 
    ... 
</div> 

現在我需要在它們之間顯示一個小圖像，但不影響行。

有一個棕色的行和列的黑色，並與他們之間的明星形象。我如何以一致的方式來做到這一點？

我嘗試添加與圖像的股利行div的那樣結束

<div class="row"> 
    ... 
    <div class="div-with-image" style="position:absolute; bottom: -10px;"> 
      <img src="..."> 
    </div> 
</div> 

這類作品，但不是以一致的方式。我嘗試在列div中添加div.div-with-image，但這樣做不好，因爲有時候該行具有固定的大小並且會混淆它。

有沒有人有任何好點子？我知道如何做2種方法，但沒有一個是一致的，不能很好地重用。

編輯：

我想我有一個想法。

<div class="row outer"> 
    <div class="cols"> 
     <div class="row"> 
     <div class="cols star-row">    
      ... 
     </div> 
     </div> 
    </div> 
</div> 

<style> 
    .outer{ 
     background-image: url('somethingnice.png'); 
    } 

    .star-row{ 
     background-image: url('star-row.png'); 
     background-position: 50% 101%; 
    } 
</style> 

我會試試這個，讓你知道它是如何工作的。

Answer 1

這不是在之間的頂部。基本上它使用一個僞元素（：after）並創建與可用空間匹配的恆星圖像的疊加圖。它使HTML最小化，CSS完成所有繁重的工作，因此您可以輕鬆更改或調整不同的屏幕尺寸。

HTML：

<div class="row columns small-12 brown"></div> 
<div class="row columns small-12 black"></div> 

CSS：

.black { 
    background-color: black; 
    z-index:-1; /* make behind .brown:after */ 
} 
.brown { 
    background-color: brown; 
} 
.black, 
.brown { 
    height: 20px; /* half height of image */ 
} 

.brown:after { 
    content: ''; 
    width: 100%; 
    display: block; 
    height: 40px; /* brown + black */ 
    background: url('star-row.png') 50% 5px fixed no-repeat; /* adjust to match your image dimensions */ 
    z-index: 2; 
} 

JSFiddle example

---

編輯 - 另一種方法

或者，您可以使用HTML編碼的星星，那麼定位更容易，只要不超過最小值（恆星的高度），行的高度可以變化，但您必須決定您的星星的數量。媒體查詢可以整理出各種屏幕尺寸顯示的數量，或者要使用的字體大小。

CSS：

.black { 
    background-color: black; 
    position: relative; 
} 
.brown { 
    background-color: brown; 
    z-index: -1; 
} 

.black, .brown{ 
    min-height:30px; 
} 

.black:before { 
    content: '\2605\00a0\00a0\2605\00a0\00a0\2605\00a0\00a0\2605\00a0\00a0\2605\00a0\00a0\2605\00a0\00a0\2605\00a0\00a0\2605\00a0\00a0\2605\00a0\00a0\2605'; 
    color: #fff; 
    text-align: center; 
    font-size: 36px; 
    width: 100%; 
    display: block; 
    height: 60px; 
    position: absolute; 
    top: -30px; 
} 

（你）HTML：

<div class="row brown"> 
    <div class="large-12 columns"> 
     <p>[content]</p> 
     <p>[more content]</p> 
    </div> 
</div> 
<div class="row black"> 
    <div class="large-12 columns"> 
     <p>[content]</p> 
     <p>[etc]</p> 
    </div> 
</div> 

（其中\2605是一個明星，\00a0是一個不間斷空格）

Updated JSFiddle