猿吟鹤唳本无意,不知下有行人行

使用opacity css,进行图片上黑条半透明签名标题

在群里曾有人问过,图片上的黑条怎么写,当时我说的是用position:relative,然后用span写个黑条就可以。后来我在看到某本书的时候,上面用的是绝对定位,且没有黑条。然后实验了一下,发现还不如用相对定位好。可见有的时候书本并不是全效率美观的。我开始用相对定位写,可是里面的半透明条反而出现问题,不是IE8就是火狐3.6以上版本。要是全黑的就感觉图片被切去一块,还感觉底部太重。想弄个半透明的感觉。然后调试了N多,终于写出来了。

感受:技术不能理论可行,还得试验才行啊。哈哈

目的:解决图片签名实底色变为半透明,感觉很轻盈精致。

0

(上图为最终效果图)

以下为源码





图片签名


———————————————————————————————————————————————————————–

总结:

opacity: .7; /*支持火狐*/
filter:alpha(opacity=70); /*IE5.5+*/

-moz-opacity:0.7; /*火狐3.5及以下支持。3.6及3.6+开始不支持*/
opacity: 0.7; /*支持火狐3.6及以上,不支持IE8*/

发表评论

您的电子邮箱地址不会被公开。