我在以前的网页设计时，遇到过类似的问题。

我在日常的网页设计时，都喜欢给图片加一些修饰，如彩色的边框，这样图片就不单调了。

如果给每一个用到的图片都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;
}