有关于背景的一些东西

来源：互联网发布：sqlserver rowguid 编辑：程序博客网时间：2024/05/16 11:55

①如何设置背景颜色？

在CSS中，background-color就是专门设置背景颜色的。

例如：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>背景</title>    <style type="text/css">        .box{            background-color: red;            width:300px;            height:300px;        }    </style></head><body>        <div class="box">        </div></body></html>

--------------------------------------------------------分割线--------------------------------------------------------

②背景图片：

语法格式为：

background-img:url(); （括号中既可以写本地地址也可以写网络地址）

例如：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>背景</title>    <style type="text/css">        .box{            width:300px;            height:300px;            background-image: url(http://img5q.duitang.com/uploads/blog/201408/10/20140810150333_3mZzT.thumb.224_0.jpeg);        }    </style></head><body>        <div class="box">        </div></body></html>

（此处为网络地址）

--------------------------------------------------------分割线--------------------------------------------------------

③背景平铺：

如果没有特殊的情况下，插入背景图片，如②所示，在横纵方向都是会平铺的。

所以我们如何控制背景图片是否需要平铺呢？

这就需要一个特殊的属性：background-repeat: ;

有四个属性：

background-repeat: repeat; 就会横纵方向平铺

background-repeat:no-repeat; 不会横纵方向上平铺

background-repeat: repeat-x; 仅仅在x方向平铺

background-repeat:repeat-y; 仅仅在y方向平铺

这就给我们了一个给整个网页做背景的思路：可以照一张体积比较小的图片，然后在整个页面上进行平铺，这样就会提升页面打开的速度。

背景图片background-image和背景颜色background-color可以同时存在，并且背景图片会覆盖背景颜色。

--------------------------------------------------------分割线--------------------------------------------------------

④背景定位

如何控制背景图片的位置呢？

background-position:水平方向垂直方向; 这个就是专门用来控制背景图片的位置的。

取值：

1.方向名次

水平方向：left center right

垂直方向：top center bottom

例如：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>背景</title>    <style type="text/css">        div{            width:500px;            height:500px;        }        .box{            border: 3px solid red;            margin: auto;            background-image:url(22.JPG);            background-repeat: no-repeat;            background-color: red;            background-position: left center;        }    </style>    <!--<link type="text/css" rel="stylesheet" href="style/reset.css">--></head><body>        <div class="box"></div></body></html>

2.像素

像素也要按照【background-position:水平方向垂直方向; 】来具体设置值。

指的注意的是：用像素设置值得时候是可以设置负值的。

--------------------------------------------------------分割线--------------------------------------------------------

⑤ 背景图片和插入图片的区别：

1.背景图片只是作为一个背景来使用，可以在背景图片上面写上一些文字。但是插入的图片却是占用一个位置，不可以在插入的图片上面写文字。

2.背景图片可以通过background-position来随意改变他的位置，但是插入的图片不可以随便改动。

--------------------------------------------------------分割线--------------------------------------------------------

技巧：

图片拼接就用div的嵌套

--------------------------------------------------------分割线--------------------------------------------------------

0 0