详解html中background-image属性的设置

复制代码
<style type=”text/css”>
body{background-image:url(“d:images4.jpg”);width:350px;height:350px;}
</style>

    呵呵，想法是好的，但你所用的浏览器支持吗？我想IE或者FF一定会当作没看见吧。也许你会问，我曾经设计论坛风格时，是可以实现的啊？我想，如果只是上面的代码的话，那是不可控制图片的，因为它只是控制BODY的大小。当然，这里也是控制不了的。如果是其它的ID标记，我想是可以控制记标记的范围大小，呵呵，当然也就不是图像的大小了。
    说实话，这个问题不仅困扰着你们，同时也困扰着我。因为它只是一个属性的值，而不是一个真正的对像。呵想到了用CSS控制的话，记得告诉我哦。

    补充：W3C于9月10发布了一篇名为《CSS Backgrounds and Borders Module Level 3》的应文章，里面为CSS的背景加上了几个我们从未见的属性：

background-clip   ：
background-origin   ：
background-size   ：背景尺寸。
background-break   ：

    虽然是有了这些属性，不过现在还没有支持它们的浏览器。真是好苦恼啊。
  
(4)、背景图片的位置控制：

    背景图片，我科是导进来了，但是它的位置真有一点无法让人接受。因为它默认的是左上对齐。但是我们却不想这样子放置，那我们又该怎么办呢。不要着急，激动人心的时刻马上到来，现在，让我们来认识一下background-position、background-position-x及background-position-y吧。

    a.基本语法:

background-position : length   || length
background-position : position || position
background-position-x : length | left | center | right
background-position-y : length | top  | center | bottom

    b.语法取值:

length :百分数 | 由浮点数字和单位标识符组成的长度值。
position : top | center | bottom | left | center | right

    c.示例：

body { background-image: url("d:images4.jpg"); background-position: 50% 50%; background-repeat:no-repeat; }
body { background-image: url("d:images4.jpg"); background-position-x: 50%; background-repeat:no-repeat; }
body { background-image: url("d:images4.jpg"); background-position-y: 50%; background-repeat:no-repeat; }

    对于取值为length | top | center | bottom我只写下面三个例子。

body { background-image: url("d:images4.jpg"); background-position: top right; background-repeat:no-repeat; }
body { background-image: url("d:images4.jpg"); background-position: 50% center; background-repeat:no-repeat; }
body { background-image: url("d:images4.jpg"); background-position: 60px center; background-repeat:no-repeat; }