背景相关的属性值

最新推荐文章于 2024-08-22 16:10:15 发布

鹿蹊zz

最新推荐文章于 2024-08-22 16:10:15 发布

阅读量3.7k

点赞数 4

分类专栏： HTML总结文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_46461853/article/details/124665028

版权

HTML总结专栏收录该内容

9 篇文章 2 订阅

订阅专栏

一、背景相关属性值

1、背景颜色（background-color）

2、背景图片颜色（background-image）

3、背景图片重复方式（background-repeat）

4、背景图片位置（background-position）

5、背景范围（background-clip）

6、背景图片偏移原点（background-origin）

7、背景图片大小（background-size）

二、background简写方式

补充：背景颜色渐变

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

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

一、背景相关属性值

1、背景颜色（`background-color`）

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

background-color: color;

一般情况下，元素背景颜色默认值是transparent，是透明的。

2、背景图片颜色（`background-image`）

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

background-image: url(./img/小图.webp);

可以同时设置背景色，和背景图片，如果同时设置，背景色是在背景图片下面

图片在元素中位置：

如果背景图片大于元素，默认是显示图片左上角

如果一样大，则正常全部显示

如果图片小于元素，则默认情况下，背景图片会平铺充满元素

3、背景图片重复方式（`background-repeat`）

background-repeat可以实现对背景图片平铺的控制。

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

参数值	作用
`repeat`	背景图片在纵向和横向上平铺（默认值）
`no-repeat`	不平铺
`repeat-x`	在横向上平铺（水平方向）
`repeat-y`	在纵向上平铺（垂直方向）

4、背景图片位置（`background-position`）

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

background-position: x y;

x 、y代表的是 x 坐标和 y 坐标，可以使用方位名词或者精确单位。

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

如果参数是方位名词：

如果指定的两个值都是方位名词，则两个值的位置顺序可以互换，不影响显示效果。

比如，right top 和 top right 效果是一样的

如果只指定了一个值，那么省略的另一个值默认为居中 center

如果参数是精确单位：

那么第一个值肯定是 x 坐标，第二个值肯定是 y 坐标，有严格的顺序
如果只指定了一个数值，那么该数值一定是 x 坐标，另一个默认垂直居中
如果参数是混合单位：

则第一个值是 x 坐标，第二个值是 y 坐标

第一个值，是水平的偏移量可正（向右）可负（向左）

第二个值，是垂直的偏移量可正（向下）可负（向上）

5、背景范围（background-clip）

background-clip: ; 设置背景的范围

参数值	作用
border-box	默认值，背景色会出现在边框下面
padding-box	背景就不会出现在边框下，出现在内容区和内边距区
content-box	背景图出现在内容区下面

6、背景图片偏移原点（background-origin）

background-origin: ; 设置背景图片偏移量原点

参数值	作用
border-box	从边框开始计算偏移量
padding-box	默认值，从内边距开始计算
content-box	从内容区开始计算偏移量

7、背景图片大小（background-size）

background-size: ; 设置背景图片的大小

1: 参数

第一个值：宽度

第二个值：高度

如果只写一个，第二个值，为auto

2:cover 图片的比例不变，将元素铺满

contain 图片比例不变，将元素完整显示

二、background简写方式

为了简化背景属性的代码，可以将这些属性合并简写在同一个属性background中，从而节约代码量。

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

background: 背景颜色背景图片地址背景重复方式（平铺）背景图片位置/背景图片大小;

eg：background:red url(./img/小图.webp) no-repeat center/cover;

注意：background-size必须要写在 background-position的后面

补充：背景颜色渐变

渐变：一种复杂的背景颜色，一种颜色向另一种颜色的过渡

渐变更像一种图片，通过background-image设置

/* background-color: red; */
/* background-image: linear-gradient(80deg,red,yellow,green); */
/* background-image: repeating-linear-gradient(red 50px ,yellow 150px); */
background-image: radial-gradient(red,yellow);

可选值：

1.linear-gradient(方位，颜色1，颜色2···)