9.CSS背景属性

最新推荐文章于 2023-08-10 12:30:03 发布

码海无际

最新推荐文章于 2023-08-10 12:30:03 发布

阅读量154

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/mahaiwuji/article/details/104742201

版权

CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.背景颜色(background-color)

2.背景图片(background-image)

3.背景重复(background-repeat)

4.背景位置(background-position)

5.背景关联(background-attachment)

6.背景简写(background)

7.综合案例

1.背景颜色(background-color)

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            background-color: red;
        }
        div {
            background-color: blue;
        }
    </style>
</head>
<body>
    <h1>码海无际</h1>
    <div>码海无际</div>
</body>
</html>

2.背景图片(background-image)

要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

如果需要设置一个背景图像，必须为这个属性设置一个 URL 值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 1200px;
            height: 800px;
            background-color: aqua; /*假设图片丢失，就使用背景颜色*/
            background-image: url("img/gsbj.jpg");
        }
    </style>
</head>
<body>
    <div>
        码海无际苦作舟<br>
        志向高远写春秋
    </div>
</body>
</html>

3.背景重复(background-repeat)

background-repeat 有四个属性值：

repeat：重复（默认值）
repeat-x：水平重复
repeat-y：纵向重复
no-repeat：不重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 1200px;
            height: 800px;
            background-color: aqua; /*假设图片丢失，就使用背景颜色*/
            background-image: url("img/gsbj.jpg");
            /*background-repeat: repeat-x;*/
            /*background-repeat: repeat-y;*/
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div>
        码海无际苦作舟<br>
        志向高远写春秋
    </div>
</body>
</html>

4.背景位置(background-position)

语法：

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

参数：

position : 　top | center | bottom | left | center | right
length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位。

说明：

设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

注意：

position 后面是x坐标和y坐标。可以使用方位名词或者精确单位。
如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 1200px;
            height: 800px;
            background-color: aqua;
            background-image: url("img/gsbj.jpg");
            background-repeat: no-repeat;
            /*background-position: center center;*/
           /* background-position: 20px 150px;*/
            background-position: 30% 70%;
        }
    </style>
</head>
<body>
    <div>
        码海无际苦作舟<br>
        志向高远写春秋
    </div>
</body>
</html>

5.背景关联(background-attachment)

参数：

scroll：背景图像是随对象内容滚动
fixed：背景图像固定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 1200px;
            height: 800px;
            background-color: aqua;
            background-image: url("img/gsbj.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div>
        码海无际苦作舟<br>
        志向高远写春秋
    </div>
</body>
</html>

6.背景简写(background)

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

background:背景颜色背景图片地址背景平铺背景滚动背景位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1200px;
            height: 800px;
            background: aqua url("img/gsbj.jpg") no-repeat fixed 200px 200px;
        }
    </style>
</head>
<body>
    <div>
        码海无际苦作舟<br>
        志向高远写春秋
    </div>
</body>
</html>

7.综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 800px;
            height: 700px;
            background-image: url("img/gsbj.jpg");
            background-repeat: no-repeat;
            font-size: 40px;
            padding-left: 220px;
            padding-top: 200px;
            font-weight: bold;
            font-family: 宋体;
            text-shadow: #000000 5px 5px 5px; /*CSS3*/
        }
    </style>
</head>
<body>
    <div>
        码海无际苦作舟<br>
        志向高远写春秋
    </div>
</body>
</html>

码海无际

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
9.CSS背景属性

目录1.背景颜色(background-color)2.背景图片(background-image)3.背景重复(background-repeat)4.背景位置(background-position)5.背景关联(background-attachment)6.背景简写(background)7.综合案例1.背景颜色(background-color)可以使...
复制链接

扫一扫