使用CSS将一些DIV放在图片上（+解释图片）

Question

              '$行[ 'TITULO']。 ''。$ contenido.time_since（的strtotime（$行[ 'DT']））'。          “）;     }     ？＆GT;

样式位于单独的文件中，它们是：

.newsticker-jcarousellite { width:600px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:50px; height:50px; }
.newsticker-jcarousellite .info { float:right; width:535px; }
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }

全部生成此：

但现在，我需要在个人资料图片的下半部分添加3个litle div，所有这些div都带有黑色（35％透明）背景，我可以放置一些文字，结果必须如下所示：

我是非常新的css，我真的不知道该怎么做，谢谢你的帮助！

Answer 1

好吧，如果你添加position: relative样式的CSS属性.newsticker-jcarousellite ul li，你可以在该块中添加另一个div，并将样式设置为position: absolute，并设置顶部偏移量约为30-40px左右。 如果你需要在图像上放置多个div，那么按照CSS属性将这个图像设置为background-image可能是更好的解决方案，然后使用填充来使大部分文本流动它

实际上，你需要在它上面有多个文本项，而不是一个包含多个文本内容的块项吗？

Answer 2

解决方案是属性z-index， 图像的z-index低于带文本的3个div 你只需要将它们相对于图像或绝对位置

Answer 3

完整代码（未经测试）：

<强> HTML / PHP：

<div id="newsticker-demo">    
    <div class="newsticker-jcarousellite">
<ul>
<?php
echo('<li>
<div class="thumbnail"><img src="'.$fotoperfil.'">
    <div class="txt">
        <span>t1</span>
        <span>t2</span>
        <span>t3</span>
    </div>
</div>
<div class="info"><a href="'.$linkpregunta.'">'.$row['titulo'].'</a><span class="cat">'.$contenido.time_since(strtotime($row['dt'])).'</span></div>
<div class="clear"></div>
</li>');
}
?></ul></div></div>

<强> CSS：

.newsticker-jcarousellite { width:600px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:50px; height:50px; position:relative /* <- new property */ }
.newsticker-jcarousellite .info { float:right; width:535px; }
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }

/* new */
.newsticker-jcarousellite .thumbnail .txt { position:absolute; left:0; right:0; bottom:0; background:#000; background:rgba(0,0,0,0.35); }

Answer 4

你可以这样做。

.thumbnail { display:block; float:left; width:125px; height:125px; background:#666; position:relative }
.thumbnail-info { position:absolute; bottom:0; width:100% } /* info inside the thumbnail positioned absolute to the bottom */
.thumbnail .text1, .text2, .text3 { margin:0 2px } /* margin on the right and left */
.thumbnail .text1 { float:left; color:#fff; font-size:10px } /* floated text */
.thumbnail .text2 { float:left; color:#fff; font-size:10px }
.thumbnail .text3 { float:left; color:#fff; font-size:10px }

<div class="thumbnail"><img src="/image">
  <div class="thumbnail-info">
   <span class="text1">Date</span>
   <span class="text2">Time</span>
   <span class="text3">Hour</span> 
  </div>
  <!-- thumbnail info end -->
</div>

Answer 5

对于你可以使用的trasparency：

.youInternalDivs="opacity:0.4;filter:alpha(opacity=40);background-color:gray"

Firefox和Chrome使用属性opacity：x表示透明度，而IE使用filter：alpha（opacity = x）。

您还可以将图像设置为较小div的背景。