用css给html img元素设置背景图
我在以前的网页设计时,遇到过类似的问题。
我在日常的网页设计时,都喜欢给图片加一些修饰,如彩色的边框,这样图片就不单调了。
如果给每一个用到的图片都PS处理一下,那岂不是累人的事。
像这样的问题我当然是用CSS了,当时我设计时直接给img元素设置了padding 和 border, background-color 效果就出来了,
但是在img元素没设置成块元素(display:block;)之前,效果是有BUG的,
IE上是无法渲染此效果的,Firefox上可以出来此效果,我还郁闷了一段时间,一直想不通问题出在那儿.原来img元素没有设置为块元素(display:block;)。
通过今天看老外的一篇 《CSS Background image on html image element?》,我知道了自己的问题所在。
不多说了,我们的主题是:用css给html img元素设置背景图
实现方法很简单:设置 img 元素为块元素(display:block;),并赋一个 padding 值。
演示(simple demo ):
CSS Code :
1 2 3 4 5 6 7 | img { display:block; padding:93px 100px 75px 100px; background-image: url('parallax.gif'); background-repeat: no-repeat; background-position: left bottom; } |
根据上面的原理,举一反三,通过类似的方法,我们还可以给 img 元素设置双边:
CSS Code :
1 2 3 4 5 6 | img { display:block; padding:1px; background:red; border:1px solid black; } |
文章评论 已经有 0 条评论!