CSS背景属性详解,-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_54021642/article/details/131315188

背景

1 背景颜色

2 背景图片

3 背景平铺

4 背景位置

5 背景相关属性连写

6（拓展）img标签和背景图片的区别

1 背景颜色

属性名：background-color

取值；关键字、rgb表示法、rgba表示法、十六进制

注意：

1 背景颜色默认值是透明：rbga(0,0,0,0)、transparent

2 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

2 背景图片

属性名：background-image

取值：url("图片路径")

注意：

1 背景图片中url中可以省略引号

2 背景图片默认是在水平和垂直方向平铺的

3 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

3 背景平铺

属性名：background-repeat

取值：

1 repeat 水平和垂直方向都平铺(默认)

2 no-repeat 不平铺

3 repeat-x 水平平铺

4 repeat-y 垂直平铺

4 背景位置

属性名：background-position

取值：background-position:水平方向垂直方向；

1 方位名词(两两组合可以表示9个位置)

水平方向左(left) 中(center) 右(right)

垂直方向上(top) 中(center) 下(bottom)

2 数组+px(坐标表示)

原点(0,0) 盒子的左上角 x轴 y轴

注意：数值为正正方向移动，数值为负反方向移动

注意：无论是背景图片还是背景颜色都只在盒子里显示

5 背景相关属性连写

属性名：background

连写：background：color image repeat position

注意：

1 单个属性值的合写，取值之间以空格隔开

2 书写顺序不分先后，但推荐上述写法

3 取值个数可以按照需求省略

4 特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url()

6（拓展）img标签和背景图片的区别

需求：需要在网页中展示一张图片的效果？

方法一：直接写上img标签即可

img标签是一个标签，不设置宽高默认会以原尺寸显示

方法二：div标签 + 背景图片

需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

使用：

不经常更换的用背景图

经常更换的用img图片

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* 盒子宽800px 高800px */
            width: 800px;
            height: 800px;
            /* 字体大小 50px */
            font-size: 50px;
            /* 背景色 pink */
            /* background-color: pink; */
            /* 背景图 1.jpg */
            /* background-image: url("images/1.jpg"); */
            /* 背景平铺 默认 */
            /* background-repeat: no-repeat; */
            /* 背景图位置 居中 */
            /* background-position: center center; */
            /* 连写 颜色 图片 平铺 位置 */
            background: pink url("images/1.jpg") no-repeat center;
        }
    </style>
</head>

<body>
    <div>
        背景Demo
    </div>
</body>

</html>

效果图：