Question

我无法弄清楚在行之间添加小图像的一致方法

假设我有这个HTML

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

现在我需要在它们之间显示一个小图像，但不会影响行。

有一个棕色的行和一个黑色的行，以及它们之间有星星的图像。我怎样才能以一致的方式做到这一点？

我尝试将带图像的div添加到行div的末尾，就像那样

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

这种作品但不是一致的。我尝试在列div中添加div.div-with-image，但这并不好，因为有时行具有固定大小并且会使其混乱。

有没有人有什么好主意？我知道如何做到这两种方式，但没有一种方法是一致的，也不是很好的可重复使用。

编辑：

我想我有个主意。

<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

在两个行div之间添加图像而不影响div

1 个答案: