如何用CSS样式表给商品图片贴上促销的小标贴?

发布网友发布时间：2022-04-23 13:52

我来回答

共4个回答

热心网友时间：2022-04-21 15:50

用绝对定位，position:absolute; 然后设置x,y的值

热心网友时间：2022-04-21 17:08

z-index要起作用，标签都必须有position属性，而且是同一容器的同一级别

热心网友时间：2022-04-21 18:42

是的要用到定位属性追问偶是在奇怪，属性Z-INDEX：这个值怎么不起作用呢？

热心网友时间：2022-04-21 20:34

以下这种样式能够做到，你自己得调整一下标签显示位置
CSS代码
<style type="text/css">
body {
margin: 0 auto;
text-align: center;
padding: 0 0 50px;
font: 12px Arial, Helvetica, sans-serif normal;
}
.watermark {
background: #000 url(watermark.jpg);
width: 500px;
height: 341px;
margin: 0 auto;
display: block;
position: relative;
}
.watermark img.blank {
width: 100%;
height: 100%;
display: block;
position: absolute;
left:0;
top: 0;z-index: 1;
}
.watermark img{
-moz-opacity:.90;
filter:alpha(opacity=90);
opacity:.90;
}
.watermark img.homeland {
background: url(homeland-longbeach.jpg) no-repeat;
}
</style>
HTML代码
<h2>CSS实现水印效果方法一</h2>
<h2>www.myecs.cn</h2>
<div class="watermark"><img class="blank" src=/uploadfile/201209/23/BB162050448.gif" alt="" />
<img src=/uploadfile/201209/23/4D162050522.jpg" alt="" />
</div>
<h2>CSS实现水印效果方法二</h2>
<div class="watermark">
<img class="blank homeland" src=/uploadfile/201209/23/BB162050448.gif" alt="" />
</div>追问水印？？？？偶不要改透明度。貌似还是定位的问题？

追答你可以把透明度去掉啊=_=
.watermark img{
-moz-opacity:.90;
filter:alpha(opacity=90);
opacity:.90;
}
这个样式去掉就OK了