用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;
}

站点统计