CSS背景

最新推荐文章于 2025-03-26 10:58:43 发布

程序员老灯

最新推荐文章于 2025-03-26 10:58:43 发布

阅读量143

点赞数

文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/m0_74991285/article/details/130905242

版权

通过CSS北京属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1.背景颜色

background-color 属性定义了元素的背景颜色。

background-color: 颜色值；

一般情况下元素背景颜色默认值是transparent （透明），我们也可以手动指定背景颜色为透明色。

2.背景图片

background-image 属性描述了元素的背景图片。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片，优点是便于控制位置。

语法：

background-image: nono | url(图片地址);

参数值	作用
none	无背景图（默认的）
url	使用绝对或者相对地址指定背景图片

例如：

div {
            width: 300px;
            height: 300px;
            background-color: transparent;
            background-image: url(images/主页背景.jpg);
        }

3.背景平铺

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。

background-repeat: repeat | no-repeat | repeat-x | repeat-y

参数值	作用
reapeat	背景图片平铺
no-reapeat	背景图片不平铺
repeat-x	背景图片横向平铺
repeat-y	背景图片纵向平铺

页面元素既可以添加背景颜色，也可以添加背景图片，背景图片会压住背景颜色

4.背景图片位置

利用 background-position 属性可以改变图片在背景中的位置。

background-position: x y;

参数代表的意思是： x坐标和y坐标。可以使用方位名词或者精确单位

参数值	说明
length	百分数 \| 由浮点数字和单位标识符组成的长度值
position	top \| center \| bottom \| left \| center right 方位名词

例如使图片水平居中，向上对齐

div {
            width: 500px;
            height: 500px;
            background-color: pink;
            background-image: url(images/王者荣耀.png);
            background-repeat: no-repeat;
            background-position: center top;
        }

实现如下: