以图⽚作为背景的属性php,html中background-image属性的设
置
background-image 属性允许指定⼀个图⽚展⽰在背景中。可以和 background-color 连⽤，因此如果图⽚不重复地话，图⽚覆盖不到地地⽅都会被背景⾊填充。代码很简单，只需要记住，路径是相对于样式表的，因此以下的代码中，图⽚和样式表是 在同⼀个⽬录中的
对于图⽚，⾸先我们先想到是背景图⽚。因为我们许许多的装饰都是⽤背景图⽚来实现的。既然这样，那么就从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来实现图⽚⼤⼩的控制。
我想很多⼈会⾃然⽽然的⽤上如下代码：
body{background-image:url("d:\images\04.jpg");width:350px;height:350px;}
呵呵，想法是好的，但你所⽤的浏览器⽀持吗？我想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)、背景图⽚的位置控制：
html横向滚动条样式背景图⽚，我科是导进来了，但是它的位置真有⼀点⽆法让⼈接受。因为它默认的是左上对齐。但是我们却不想这样⼦放置，那我们⼜该怎么办呢。不要着急，激动⼈⼼的时刻马上到来，现在，让我们来认识⼀下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; }
说了这么多例⼦，我想你对于定位，有⼀定的了解了吧。
(5)、背景图⽚的透明设置：
有的时候，我们总想着去将图⽚设置成透明的。
(6)、多幅背景图⽚的设置：
对于多幅背景图⽚的设置，我是在《超越CSS：WEB设计艺术精髓》⾥看到的。不过，却⼜让我很遗憾，因为，⽬前⽀持⼀个标签内有多幅背景图⽚的浏览器太⼩了，我知道的也只有Apple Safari 。以许你会问，这怎么可能。当你看完这个实例之后，我想你会惊讶，“天啊，CSS3之前都只能给每个元素使⽤⼀幅图⽚。”如果想研究⼀下的话，就快快安装⼀个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;}
更多html中background-image属性的设置相关⽂章请关注PHP中⽂⽹！
本条技术⽂章来源于互联⽹，如果⽆意侵犯您的权益请点击此处反馈版权投诉本⽂系统来源：php中⽂⽹

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。