我在做个人站点 我爱购物网 时 需要实现图片上面可以叠加文字层,实现这种效果其实只需要通过CSS即可实现。
像这种效果的话HTML大概如下:
CSS的内容如下:
我们来讲解一下css里面的主要事项。
1、最外面包内容的DIV main_top_sell需要设置为position:relative,使得其里面的内容可以使用绝对定位。
2、product_title 商品标题设置为position:absolute;然后bottom:48px;使其定位到main_top_sell的底部
3、为了使product_title商品标题实现半透明效果,需要增加filter:alpha(opacity=60);-moz-opacity:0.6;opacity: 0.6;这几个参数可以保证在各个浏览器下面,文字层都是半透明效果。