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

对于图片，首先我们先想到是背景图片。因为我们许许多的装饰都是用背景图片来实现的。既然这样，那么就从CSS控制背景图片讲起吧。

定义和用法

background-image 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

1.CSS控制背景图片：

    对于一个网页，我们开始设计的时候，可能没有过多的去想背景图到底是什么，因为大多都是设计背景色就可以了，原因吗，我想也很简单，因为它与前景音乐一样，对于网页的打开，速度会有一定的影响。不过对于一般的个人网站，或者个人博客而言，它对展现自己的个性，当然是不可或缺的了，当然什么都不会太过完美，有好就有坏，也就是当图像不可用但CSS可用的时候，替换内容就不会显示出来，因此，并不建议在导航按钮文本或类似的情况中使用CSS背景图片。
    控制背景图片的CSS属性有很多，只要与图片的相关的，大多都会用的上。

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

    当然大家最熟悉的当然是background与background-image了。
   为网页设计背景图片的代码是：

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 :    背景图像仅在纵向上平铺

而代码，我想只要懂一点CSS的都知道，如下
：
body {background:url("d:/images/04.jpg");background-repeat:no-repeat}
    这样的话，它就是以原图像大小显示了。

(3)、背景图片的大小控制：

    不过问题是，倘若图片过大了，又怎么办呢？对于一个好网页来说，最好不要用太大的图片，原因上面也说过了，影响打开网页的速度。我们最好还是用PS或者FireWorks处理一下。不过既然我提到了，我们也不防用CSS来实现图片大小的控制。
    我想很多人会自然而然的用上如下代码：

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表