背景 - 简书

css背景（background）

css可以添加背景图片和背景颜色，以及图片设置。

backgroung-color	背景颜色
backgroung-image	背景图片地址
backgroung-repeat	是否平铺
backgroung-position	背景位置
backgroung-attachment	背景固定还是滚动
背景的合写（复合属性）	-
backgroung背景颜色背景图片地址背景平铺背景滚动背景位置	-

背景图片（image）

背景平铺（repeat）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style>
        div {
            height: 400px;
            width: 400px;
            background-color: deepskyblue;
            background-image: url(images/123.jpg);
            background-repeat: no-repeat;/*图片不平铺，平铺了如果尺寸不够的话将会把图片的一部分剪切到空白部分*/
            /*repeat还有其他属性： */
            /*        repeat-x： 背景图像在横向上平铺 */
            /*        repeat-y： 背景图像在纵向上平铺 */
            /*        repeat： 背景图像在横向和纵向平铺 */
            /*        no-repeat： 背景图像不平铺 */
            /*        round： 当背景图像不能以整数次平铺时，会根据情况缩放图像。（CSS3） */
            /*        space： 当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围，能以整数次填充时，图片能填充几次盒子就会出现几次。（CSS3）*/
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

image.png

背景位置（position）

background-position: length length
background-position: position position

length: 百分数
position：top center bottom left center right

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style>
        div {
            height: 500px;
            width: 500px;
            background-color: deepskyblue;
            background-image: url(images/123.jpg);
            background-repeat: no-repeat;/*图片不平铺，平铺了如果尺寸不够的话将会把图片的一部分剪切到空白部分*/
            /*repeat还有其他属性： */
            /*        repeat-x： 背景图像在横向上平铺 */
            /*        repeat-y： 背景图像在纵向上平铺 */
            /*        repeat： 背景图像在横向和纵向平铺 */
            /*        no-repeat： 背景图像不平铺 */
            /*        round： 当背景图像不能以整数次平铺时，会根据情况缩放图像。（CSS3） */
            /*        space： 当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围，能以整数次填充时，图片能填充几次盒子就会出现几次。（CSS3）*/
            background-position: left top;/*默认是左上角，方位名词无顺序要求，谁在前都行，如果只写一个方位名词，例如：left，那么另外一个词默认是center，图片就会靠左居中显示图片，如果用精确地单位，那第一个值是x坐标，第二个是y坐标。也可以混写background-position: 20px center;*/
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

image.png

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #000;
            background-image: url(images/ms.jpg);
            background-position:  center -25px;/*设置位置的精确位置，负值就是向左、向上移动，在这里是沿y轴向上移动25px*/
        }
    </style>
</head>
<body>

</body>
</html>

背景附着

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #000;
            background-image: url(images/ms.jpg);
            background-repeat: no-repeat;
            background-position:  center -25px;/*设置位置的精确位置，负值就是向左、向上移动，在这里是沿y轴向上移动25px*/
            background-attachment: fixed;/*默认值是scroll：滚动的，意思是图片随着滚动条拉动也一起滚动，但是设置为fixed之后，背景图片固定不动，拉动滚动条只有文字会动，背景图不会动*/
        }
        p {
            color: peachpuff;
            font-size: 20px;
        }
    </style>
</head>
<body>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
<p>背景附着背景附着背景附着背景附着背景附着</p>
</body>
</html>

背景简写

background属性的值书写顺序没有强制标准，建议如下写：
background：背景颜色、背景图片地址、背景平铺、背景滚动、背景位置。

div  {
    background: transparent  url(image.jpg)  repeat-y  scroll  50% 0;
}
---->
div {
    background: #000  url(image.jpg)  no-repeat  scroll center   -25px;
}

背景透明（css3）

div {
    background:  rgba(0, 0, 0, 0.3)
}
文字和盒子的半透明效果一样都是用rgba。

背景缩放（css3）

通过background-size设置背景图片的尺寸，参数设置如下：
（1）可以设置长度单位（px）或百分比（设置百分比时，参照盒子的宽高）
（2）设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域如有溢出部分会被隐藏。
（3）设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url(images.jpg);
   background-size: 300px 100px;
 /* background-size: contain;*/
 /*background-size: cover;  */

多背景（css3）

以逗号分隔可以设置多背景，可以用于自适应布局做法就是用逗号隔开就好

一个元素可以设置多重背景图像
每组属性间使用逗号分隔
如果设置的多重背景图之间存在交集（重叠），前面的背景图会覆盖后面的。
为了避免背景色将图像覆盖，背景色通常都定义在最后一组上。

div {
    width: 500px;
    height: 500px;
    background: url(1.jpg)  no-repeat  left  top,  url(2.jpg)  no-repeat  left  bottom,  url(3.jpg)  no-repeat  right  top #aaa;
    /*第一个背景放在最上面，最后一个背景放在最下面。 仅最后一个背景允许拥有背景色*/
}

凹凸文字效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }
        div {
            color: #cccccc;
            font: 700 80px "微软雅黑";
        }
        div:first-child { /*水平位置  垂直位置  模糊距离  阴影颜色*/
             text-shadow: 3px 3px 3px #000, -1px -1px 1px #fff;
        }
        div:last-child {   /*水平位置  垂直位置  模糊距离  阴影颜色 凹下和凸起正相反，包括正负*/
            text-shadow:  1px 1px 1px #fff, -3px -3px 3px #000;
        }
    </style>
</head>
<body>
<div>凸起效果</div>
<div>凹下效果</div>
</body>
</html>

image.png

导航栏案例

文本的装饰：
text-decoration 通常用于给链接修改装饰效果

值	描述
none	默认，定义标准文本
underline	定义文本下的一条线，就是下划线，链接默认自带
overlinr	定义文本上的一条线，
line-through	定义穿过文本的一条线，就是删除线

下例：
（1）text-align: center; 和 line-height: 50px;要一起用才能做到水平垂直居中，text-align: center; 是让文本水平居中， line-height: 50px;是让行高等于盒子高度，这样就能实现文字垂直居中，两个一起写就能实现水平垂直居中。

（2）:hover 选择器用于选择鼠标指针浮动在上面的元素。提示：:hover 选择器可用于所有元素，不只是链接。

（3）text-decoration的默认值是none，但是a是链接，默认自带下划线，值设为none之后他会取消下划线。

（4） :hover 选择器用于选择鼠标指针浮动在上面的元素。

提示：:hover 选择器可用于所有元素，不只是链接。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #000;
        }
        a {
            width: 200px;
            height: 50px;
            /*background-color: orange;*/
            display: inline-block;/*行内元素转为行内块；*/
            text-align: center;/*文字水平居中*/
            line-height: 50px;/*在一行盒子内，设定行高等于盒子高度，就可以使文字垂直居中，需要和text-align配合使用，没有text-align的话，文字只会靠左垂直居中*/
            color: #fff;
            font-size: 22px;
            text-decoration: none;/*取消文本装饰（去掉下划线）*/
        }
        a:hover {/*  :hover 选择器用于选择鼠标指针浮动在上面的元素。 提示：:hover 选择器可用于所有元素，不只是链接。*/
            background: url(images/h.png) no-repeat;
        }
    </style>
</head>
<body>
<a href="#">专区说明</a>
<a href="#">申请资格</a>
<a href="#">兑换奖励</a>
<a href="#">下载游戏</a>
</body>
</html>

image.png

背景

css背景（background）

背景图片（image）

背景平铺（repeat）

背景位置（position）

背景附着

背景简写

背景透明（css3）

背景缩放（css3）

多背景（css3）

凹凸文字效果

导航栏案例

推荐阅读更多精彩内容