CSS控制背景图片

1.CSS控制背景图片：
    一般网页设计时我们优先考虑用背景色而不是背景图片，因为它和音乐一样，对网页打开速度有一定的影响。 不过对于以展现个性为目的的个人网页，背景图片自然不可少。有得就有弊，无所谓完美。

    控制背景图片的CSS属性有很多，大多都会用的上。

 

(1)、背景图片的导入：

body {background:url("d:\images\04.jpg")}
或者
body {background-image:url("d:\images\04.jpg")}

(2)、背景图片的显示方式：
上面的代码只是实现图片导入。 如果图片小，就会以平铺的方式，如果是大了，为显示它，就是会出现滚动条。为此，需要使用background-repeat属性，

它是取值：
repeat :    默认值。背景图像在纵向和横向上平铺
no-repeat : 不平铺
repeat-x :  仅在横向上平铺
repeat-y :  仅在纵向上平铺

以原图像大小显示：
body {

background:url("d:\images\04.jpg");

background-repeat:no-repeat}

 

(3)、背景图片的大小控制：
    若图片过大怎么办？最好不要用太大的图片，影响打开网页的速度。最好用PS或者FireWorks处理一下。不过既然我提到了，我们也不防用CSS来实现图片大小的控制。
    我想很多人会自然而然的用上如下代码：
<style type="text/css">
body{

background-image:url("d:\images\04.jpg");

width:350px;height:350px;}
</style>
呵呵，如果只是上面的代码的话，那是不可控制图片的，因为它只是控制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:\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; } /*垂直居中*/

    对于取值为length | top | center | bottom我只写下面三个例子。
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; } /*距左60像素下*/

    说了这么多例子，我想你对于定位有一定的了解了吧。

 

(5)、背景图片的透明设置：
    有的时候，我们总想着去将图片设置成透明的。？...？

(6)、多幅背景图片的设置：
    对于多幅背景图片的设置，在《超越CSS：WEB设计艺术精髓》里有讲。不过，目前支持一个标签内有多幅背景图片的浏览器太少了，我只知道Apple Safari。但我相信，这是发展的趋势。谁解释CSS能力越强，它就将是发展的潮流，谁俱有完美的WEB准标，谁就是明日浏览器之星。
    代码如下：
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;}

转载于:https://www.cnblogs.com/Semporna/archive/2012/11/22/2783060.html