html中background-image属性的设置.对于图片,首先我们先想到是背景图片。因为我们许许多的装饰都是用背景图片来实现的。既然这样,那么就从CSS控制背景图片讲起吧。
1.CSS控制背景图片:
(1)、背景图片的导入:
body {background:url(“d:\images\04.jpg”)}
或者
body {background-image:url(“d:\images\04.jpg”)}
(2)、背景图片的显示方式:
它是取值:
repeat :
no-repeat :
repeat-x :
repeat-y :
而代码,我想只要懂一点CSS的都知道,如下:
body {background:url(“d:\images\04.jpg”);background-repeat:no-repeat}
(3)、背景图片的大小控制:
<style type=”text/css”>
body{background-image:url(“d:\images\04.jpg”);width:350px;height:350px;}
</style>
background-clip
background-origin
background-size
background-break
(4)、背景图片的位置控制:
background-position : length
background-position : position || position
background-position-x : length | left | center | right
background-position-y : length | top
length :百分数 | 由浮点数字和单位标识符组成的长度值。
position : top | center | bottom | left | center | right
body { background-image: url(“d:\images\04.jpg”); background-position: 50% 50%; background-repeat:no-repeat; }
body { background-image: url(“d:\images\04.jpg”); background-position-x: 50%; background-repeat:no-repeat; }
body { background-image: url(“d:\images\04.jpg”); background-position-y: 50%; background-repeat:no-repeat; }
body { background-image: url(“d:\images\04.jpg”); background-position: top right; background-repeat:no-repeat; }
body { background-image: url(“d:\images\04.jpg”); background-position: 50% center; background-repeat:no-repeat; }
body { background-image: url(“d:\images\04.jpg”); background-position: 60px center; background-repeat:no-repeat; }
(5)、背景图片的透明设置:
(6)、多幅背景图片的设置:
body {
background-image:
url(“d:\mypic\001.png”),
url(“d:\mypic\002.png”);
url(“d:\mypic\003.png”);
url(“d:\mypic\004.png”);
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat-x,
repeat-y,
repeat-x,
repeat-y,
background-position:
top left,
top right,
bottom right,
bottom left,
top left,
top right,
bottom right,
bottom left;}