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

Posted 2023-03-30

一张商品的主图，想在左上角贴一个促销的小标贴。效果如下图：

偶自己捣鼓用DW了下，发现有点搞不定的地方，偶写的代码如下：
<div style="background-image:url(http://img01.taobaocdn.com/imgextra/i1/387457675/T2pB_xXjRaXXXXXXXX_!!387457675.png);backgroud-repeat:no-repeat; width:750px;height:220px;">
<div style="margin-left:6px; margin-top:4px;z-index:5;"><img src="http://img01.taobaocdn.com/imgextra/i1/387457675/T2vQDtXeBaXXXXXXXX_!!387457675.png" /></div>
<div style=" background-image:url(http://img01.taobaocdn.com/imgextra/i1/387457675/T25fSGXd4bXXXXXXXX_!!387457675.jpg_190x190.jpg); background-repeat:no-repeat; position:absolute;left:50px;top:18px; width:190px; height:215px; z-index:0;"></div>
</div>
效果如下图：

哪位高人给解释下红圈处的问题哇，怎么解决？？？
此部分：<div style=" background-image:url(http://img01.taobaocdn.com/imgextra/i1/387457675/T25fSGXd4bXXXXXXXX_!!387457675.jpg_190x190.jpg); background-repeat:no-repeat; position:absolute;left:50px;top:18px; width:190px; height:215px; z-index:0;"></div>，把背景图去除，改成<div><img -背景图-/></div>也是一样的问题。

参考技术A 用绝对定位，position:absolute; 然后设置x,y的值追问

偶已经设了绝对定位

追答

那没有定位到那个位置吗？

追问

定了，个人理解，“定位”只是相对于父级来讲。偶刚又重试了个写法。把包包那个图片作背景，【热销】那个图写在DIV层里，然后定位，用left:负值，可以实现了。如下图：

追答

对，你这也是一种好的思路，但是你要做背景的话你要设定DIV框的大小，否则背景无法显示出来

追问

嗯，不过现在又来个问题啦，包包链接怎么搞哇？？？？最后修改的：
还有：偶是在奇怪，属性Z-INDEX：这个值怎么不起作用呢？

参考技术B z-index要起作用，标签都必须有position属性，而且是同一容器的同一级别 参考技术C 是的要用到定位属性追问

偶是在奇怪，属性Z-INDEX：这个值怎么不起作用呢？

参考技术D 以下这种样式能够做到，你自己得调整一下标签显示位置
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.myeducs.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了

本回答被提问者采纳

css 如何用图片改变表单边框的样式(圆角边框,有阴影)

我想用图片做背景 不希望用js 另外表单中的输入框也是要用图中的那种边框的
就是希望有点立体感....
如果各位高手方便的话 把代码写出来给我好吗 要写的东西其实不多 附上代码可以加分到50分...

两种效果 一种是把图片做成大的背景
但是这样有局限性 因为这样它不会根据页面的变化而变化了
另一种方法是我推荐的方法
把底部圆角那儿切出来叫top.jpg
底部叫foot.jpg
中间的叫bg.jpg
<div style=" background:url(这里是bg.jpg) repeat-y left top">
<div>这里放head.jpg图片</div>
<div>这里就是你想要写的内容随便放什么都可以的</div>
<div>这里放foot.jpg图片</div>
</div>
这样的效果你看下吧 肯定是最简单最方便实现你现在这种效果的
而且会根据内容的大小而变化。
另一种
文本框用input，<input type="text" class="txtnput" value=""/>
.txtnputfloat: left;width:126px; height:27px;background:url(图片路劲);border:none;
高度和宽度是你效果图中你需要的那种文本框的大小，背景图片也是你需要的那种框。
按钮也是一样的实现。 参考技术A 文本框用input，<input type="text" class="txtnput" value=""/>
.txtnputfloat: left;width:126px; height:27px;background:url(图片路劲);border:none;
高度和宽度是你效果图中你需要的那种文本框的大小，背景图片也是你需要的那种框。
按钮也是一样的实现。本回答被提问者采纳 参考技术B 圆角边框：border-radius: 8px（8px代表的是圆角弧度，可以根据自己的需要调整，需要注意的是这个属性的兼容性，在IE8以下的浏览器是不兼容的，也就是说，没效果）;

阴影：box-shadow:x y z color(比如：box-shadow: 0px 0 13px rgba(100,100,100,.7); x代表的是水平方向的偏移，y代表的是纵向偏移，z代表的是扩散，color就是阴影颜色了，表现方式有2种，1.就是#ccc[十六进制];2.rgba[或者rgb]
);

这两个样式都是css3样式，所以在低版本的IE上面都是不兼容的。