css 背景平铺

html-css021

css 背景平铺,第1张

不平铺应该是background-repeat:no-repeat背景图片等于整个网页的宽和整个网页的高不好实现，因为图片会变形，屏幕太大会让图片失真，用大图片又会影响网页打开速度，

background-repeat: repeat-x

使用“CSS 样式定义”对话框的“背景”类别可以定义 CSS 样式的背景设置。可以对网页中的任何元素应用背景属性。

加了background-repeat:repeat-x之后,背景现在只在X轴即横向进行了平铺操作，纵向并没有进行平铺。这便是css对于背景细节的控制之一。background-repeat是针对背景平铺的属性设置，可选的值包含：

代码如下:

repeat 即默认方式，完全平铺背景；

no-repeat 在X及Y轴方向均不平铺；

repeat-x 横向平铺背景；

repeat-y 纵向平铺背景。

1、首先准备一张设置为背景的图片，这边准备的是一张650px*347px的图片。

2、然后建立一个html文档，将它和背景图片放到一个文件夹中。

3、编辑html文档，这边建立一个div，设置宽度为700px，高度跟背景图一样，为347px。

4、就给div设置背景图片。

5、在浏览器中预览会发现图片平铺了，这不是想要的效果。

6、然后可以给div再加上属性，-moz-background-size:100% 100%background-size:100% 100%。

7、这样设置后就会发现背景图片拉伸至100%了。