CSS3基础教程(十四)

CSS Backgrounds(背景)属性是用于定义HTML元素的背景。

1.背景图片语法 - background-image:url() 引入背景图片 - background-repeat:no-repeat 设置背景图片是否重复平铺 - background-position:left top 设置图片的css背景定位，left代表靠左，top代表靠上

简写背景图片语法： background:url(图片地址) no-repeat left top

实例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div#main{
            width: 100%;
            height: auto;
            display: flex;
            border: 0px solid #ccc;
        }
        div{
            width: 280px;
            height: 280px;
            border: 1px solid #ccc;
            margin: 0px auto;
        }
        #box1{
            background: url(http://img.simoniu.com/background_logo2.jpg) no-repeat 0px 0px;
        }
        #box2{
            background: url(http://img.simoniu.com/background_logo2.jpg) repeat 0px 0px;
        }
        #box3{
            background: url(http://img.simoniu.com/background_logo2.jpg) repeat-x 20px 20px;
        }
        #box4{
            background: url(http://img.simoniu.com/background_logo2.jpg) repeat-y 20px 20px;
        }
    </style>
</head>
<body>
<div id="main">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
</div>
</body>
</html>

运行效果：

2.CSS背景颜色

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div#main{
            width: 100%;
            height: auto;
            display: flex;
            border: 0px solid #ccc;
        }
        div{
            width: 280px;
            height: 280px;
            border: 1px solid #ccc;
            margin: 0px auto;
        }
        #box1{
            background-color: lightskyblue;
        }
        #box2{
            background-color: lightsalmon; padding: 20px;
        }

        #box3{
            background-image: linear-gradient(to right, #1d7703, #2b9aef);
        }

    </style>
</head>
<body>
<div id="main">
    <div id="box1">DIV1</div>
    <div id="box2">DIV2</div>
    <div id="box3">DIV3</div>
</div>
</body>
</html>

运行效果：

3.CSS3 背景 CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。 - background-size 属性规定背景图片的尺寸。 - background-origin 属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div#main{
            width: 100%;
            height: auto;
            display: flex;
            border: 0px solid #ccc;
        }

        #box1{
            width: 380px;
            height: auto;
            border: 5px solid #ccc;
            margin: 0px auto; /*水平居中*/
            padding: 30px 20px;
            background: url(http://img.simoniu.com/background_logo2.jpg) no-repeat;
            background-size:100% 100%;
            background-origin:content-box;
        }

    </style>
</head>
<body>
<div id="main">
    <div id="box1">
        北国风光，千里冰封，万里雪飘。
        望长城内外，惟余莽莽；大河上下，顿失滔滔。
        山舞银蛇，原驰蜡象，欲与天公试比高。
        须晴日，看红装素裹，分外妖娆。
        江山如此多娇，引无数英雄竞折腰。
        惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
        一代天骄，成吉思汗，只识弯弓射大雕。
        俱往矣，数风流人物，还看今朝。
    </div>
</div>
</body>
</html>

运行效果：