CSS背景属性

Oʀɪɢɪɴᴀʟ .822

已于 2023-10-12 14:26:16 修改

阅读量1.1k

点赞数 6

文章标签： css 前端

于 2023-10-12 14:19:53 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_70374250/article/details/133789522

版权

background-color 背景颜色
background-image 背景图片
background-repeat 背景平铺方式
background-attachment 背景图片固定方式
background-position 背景图片位置
background-size 背景图片尺寸
background-origin 背景图片显示区域
background-clip 背景显示区域
inherit 继承父元素的背景属性样式

背景属性

背景颜色（background-color）

取值：

transparent 默认，透明背景
color_name 颜色名称，比如red
hex_number 十六进制颜色，比如#ff000
rgb_number rgb色值，比如rgb(255,0,0)或者rgba(255,0,0,.2)
inherit 继承父元素背景色

div {
    background-color: red;
}
h1 {
    background-color: #ff0000;
}
p { 
    background-color: rgb(255, 0, 0);
}

背景图片（background-image）

background-image 属性设置元素的背景图⽚，元素的背景占据了元素的全部尺⼨，包括内边距和边框，但不包括外边距。默认，背景图像位于元素的左上⻆，并在⽔平和垂直⽅向上重复。

p {
    background-image:url("./img.jpg")
}

背景平铺（background-repeat）

background-repeat 属性设置是否重复背景图像。取值：

repeat 默认值，⽔平垂直⽅向上平铺
no-repeat 不平铺
repeat-x ⽔平⽅向平铺
repeat-y 垂直⽅向平铺

div {
    background-repeat:no-repeat; // 不平铺
}
div {
    background-repeat:repeat; // 默认值，⽔平垂直⽅向上平铺
}
div {
    background-repeat:repeat-x; // ⽔平⽅向平铺
}
div {
    background-repeat:repeat-y; // 垂直⽅向平铺
}

背景图片固定（background-attachment）

background-attachment 属性设置背景图像是否固定或者随着⻚⾯的其余部分滚动。取值：

scroll 默认值。背景图像会随着⻚⾯其余部分的滚动⽽移动
fixed 当页面的其余部分滚动时，背景图像不会滚动

div {
    background-image:url("");
    background-repeat:no-repeat;
    background-attachment:fixed;
}
div {
    background-image:url("");
    background-repeat:no-repeat;
    background-attachment:scroll;
}

背景定位（background-position）

background-position 属性设置背景图像的起始位置。这个属性设置背景原图像的位置，背景图像如果要重复，将从这⼀点开始。取值：

上下左右第一个位置定义上下的位置（top/center/bottom），第二个定义左右位置(left/center/right)，如果仅定义一个值，第二个值为 center
x y 第一个值为水平位置，第二个为垂直位置，可以是百分比或者px，如果仅定义一个值，第二个值为50%

div {
    background-position: top left;
}
div {
    background-position: center;
}
div {
    background-position: 20% 60%;
}
div {
    background-position: 0 10px;
}
div {
    background-position: 50% 10px;
}

背景图片尺寸（background-size）【CSS3】

div {
    background-size:80px 60px;
}
/*length 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"*/
div {
    background-size:50% 50%;
}
/*percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。*/
div {
    background-size:cover;
}
/*cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。*/
div {
    background-size:contain;
}
/*contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。*/

背景图片显示区域（background-origin）【CSS3】

background-origin 属性规定 background-position 属性相对于什么位置来定位。注意：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有

padding-box 默认值，背景图像相对于内边距定位
border-box 背景图像相对于边框定位
content-box 背景图像相对于内容边框定位

div {
    background-origin:padding-box;
}
div {
    background-origin:border-box;
}
div {
    background-origin:content-box;
}

背景显示区域（background-clip）【CSS3】

background-clip 属性规定背景的绘制区域。取值：

border-box 默认值，背景填充全部
padding-box 背景填充不包括边框
content-box 背景只填充内容部分

div {
    backgorund-color:red;
    background-origin:border-box;
}
div {
    backgorund-color:red;
    background-origin:padding-box;
}
div {
    backgorund-color:red;
    background-origin:content-box;
}

雪碧图 /精灵图（CSS Sprites）

碧图就是将很多很多的小图标放在一张图片上,就称之为雪碧图使用雪碧图的优势：

将多张图片合并到一张图片中，可以减小图片的总大小。
将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。

<style>
  div{
    width: 30px;
    height: 30px;
    border: 1px solid #f00;
    background: url('./淘宝雪碧图.png') no-repeat;
  }
  .box1{
    background-position: 3px 3px;
  }
  .box2{
    /* 通过背景图片定位，调整图片的位置 */
    background-position: 3px -40px;
  }
</style>
</head>
<body>
<div class='box1'></div>
<div class='box2'></div>