只通过使用类来通过CSS重叠图像？

请，就这个一看：只通过使用类来通过CSS重叠图像？

<div class="box photo col2 normaloffer">

凡CSS（简体）是这样的：

.box { 
    margin: 5px; 
    padding: 5px; 
    font-size: 11px; 
    line-height: 1.4em; 
    float: left; 
    border:1px solid #DFDFDF; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
      border-radius: 5px; 
} 

.normaloffer { 
    background: #D8D5D2; 
} 

.col2 { width: 180px; }

呈现：

enter image description here

好吧，我需要重叠在每个图像的顶部中心的图像，我知道，制作一些div和安排他们我可以做到这一点，但我想知道，我可以让这个usi上课吗？因为我有时要重叠图像，有时候不会。喜欢的东西：

<div class="box photo col2 normaloffer OVERLAP"> 
.OVERLAP { // no idea what to put in here, is possible? }

编辑结果： enter image description here

来源

2012-11-02 DomingoSL

你能告诉（图像中），你想怎样呢？（只是清晰的可视化会有所帮助。） –

是的，检查编辑 – DomingoSL

您可以使用：伪类后到div内后创建的元素，绝对定位放置。

.overlap { 
    position:relative; 
} 

.overlap:after { 
    content:' '; 
    position:absolute; 
    top:0; 
    left:60px; 
    width:60px; 
    height:60px; 
    background:url("http://placekitten.com/60/60") no-repeat center center red; 
}

enter image description here

见工作示例：http://jsfiddle.net/WpBKr/

来源

2012-11-02 22:04:41 amosrivera

这是完美的！ – DomingoSL

如果您想支持IE7或更低版本，请查看[此答案]（http://stackoverflow.com/a/4181897/612266）about：after和之前：伪元素。 –

有什么办法处理图像的透明度？ – DomingoSL

只通过使用类来通过CSS重叠图像？

回答

相关问题