添加两分的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