使用CSS在图片上放置一些div（+；解释图像） “.$row['titulo']”..$contenido.time_自（strotime（$row['dt']））。” (),； } ？>

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

.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个小div，它们都有一个黑色（35%透明）背景，在那里我可以放置一些文本，结果必须如下所示：

---

我是css的新手，我真的不知道怎么做，谢谢你的帮助

好的，如果您添加CSS属性

position:relative

的样式

。newsticker jcarousellite ul li

，您只需在该块中添加另一个div，将样式设置为

position:absolute

，并将顶部偏移设置为~30-40px左右。 如果您需要在图像顶部放置多个div，根据CSS属性将该图像设置为

背景图像

，然后使用填充使大部分文本在其周围流动可能是更好的解决方案

---

事实上，您是否需要在它上面有多个文本项，而不是一个包含多个文本项的块项？

如果您添加CSS属性

position:relative

的样式

。newsticker jcarousellite ul li

，您只需在该块中添加另一个div，并将样式设置为

位置：绝对

，并将顶部偏移设置为~30-40px左右。 如果您需要在图像顶部放置多个div，根据CSS属性将该图像设置为

背景图像

，然后使用填充使大部分文本在其周围流动可能是更好的解决方案

---

实际上，是否需要在其上方有多个文本项，而不是一个包含多个文本项的块项？

解决方案是属性z索引， 图像的z索引比文本的3个div低

---

然后，您只需将它们相对于图像或绝对值进行定位

解决方案是属性z索引， 图像的z索引比文本的3个div低 然后，您只需相对于图像或绝对值对其进行定位即可完成代码（未测试）：

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>

.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); }

完整代码（未测试）：

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>

.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); }



你可以这样做

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

缩略图{显示：块；浮动：左；宽度：125px；高度：125px；背景：#666；位置：相对}
.缩略图信息{位置：绝对；底部：0；宽度：100%}/*缩略图内的信息绝对位于底部*/
.thumbnail.text1.text2.text3{margin:0 2px}/*右边和左边的边距*/
.thumbnail.text1{float:left；color:#fff；font size:10px}/*浮动文本*/
.thumbnail.text2{float:left；color:#fff；font size:10px}
.thumbnail.text3{float:left；color:#fff；font size:10px}
日期
时间
小时
您可以这样做

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

缩略图{显示：块；浮动：左；宽度：125px；高度：125px；背景：#666；位置：相对}
.缩略图信息{位置：绝对；底部：0；宽度：100%}/*缩略图内的信息绝对位于底部*/
.thumbnail.text1.text2.text3{margin:0 2px}/*右边和左边的边距*/
.thumbnail.text1{float:left；color:#fff；font size:10px}/*浮动文本*/
.thumbnail.text2{float:left；color:#fff；font size:10px}
.thumbnail.text3{float:left；color:#fff；font size:10px}
日期
时间
小时
对于您可以使用的透明度：

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

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

您还可以将图像设置为较小div的背景。
对于可以使用的透明度：

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

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

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