背景属性（background）及精灵图的使用

无微或无常

于 2024-08-21 19:31:01 发布

阅读量717

点赞数 28

文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_71949204/article/details/141367277

版权

背景属性（background）

1. 定义

background 设置背景的显示方式，是一个间歇属性

设置顺序为：background-color background-image background-repeat background-attachment background-position

可以设置如下属性：

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

p { background: #ff0000 url() no-repeat fixed center; }

2. 背景颜色（background-color）

background-color 属性设置元素的背景颜⾊

元素背景范围 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); }

3. 背景图片（background-image）

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

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

4. 背景平铺（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; // 垂直⽅向平铺 }

5. 背景图片固定（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; 
}

6. 背景定位（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; }

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

background-size 属性规定背景图像的尺寸。取值：

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

div { background-size:80px 60px; } 
div { background-size:50% 50%; } 
div { background-size:cover; } 
div { background-size:contain; }

8. 背景图片显示区域（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; }

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

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

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

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

2 雪碧图 /精灵图（CSS Sprites）

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

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

https://kmdjs.github.io/arejs-tool-sprite/

http://www.spritecow.com/

<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>

2.1 为什么使用雪碧图

网站开发90%会用到小图标，多小图标调用显示是前端开发常见的问题，如果每个小图标都单独调用一张图片，即意味着每个小图标的显示都产生一个HTTP请求；每个请求都需要一定的性能开销，主要在请求、以及响应阶段。为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是标签，而是CSS Sprite雪碧图。

2.2 什么样的图片适合拼成雪碧图

静态图片，不随用户信息的变化而变化
小图片，图片容量比较小（一些大图不建议拼成雪碧图）
加载量比较大

3 iconfont阿里巴巴矢量图

除了iconfont阿里巴巴矢量图，还有其他的小图标Font Awesome 地址：iconfont-阿里巴巴矢量图标库注册微博，git或者淘宝账号登陆

1.搜索要下载的图标（如：小米购物车）

将当前图标加入购物车

2.点击购物车下载对应的图片或者代码

图片可以直接使用，但是咱们使用的是代码

3.下载好的目录

下载好的代码中有三种引入方式：class类，symbol引入，unicode引用方式

class类： a. 兼容性良好，支持ie8+，及所有现代浏览器。 b. 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。 c. 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。 d. 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

symbol引入： a. 支持多色图标了，不再受单色限制。 b. 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。 c. 兼容性较差，支持 ie9+,及现代浏览器。 d. 浏览器渲染svg的性能一般，还不如png。

unicode引用： a. 兼容性最好，支持ie6+，及所有现代浏览器。 b. 支持按字体的方式去动态调整图标大小，颜色等等。 c. 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色

各有各的优势，咱们使用的是class类的引入方式 css引入

<link rel="stylesheet" href="./iconfont.css">

html引入

<span class="iconfont icon-xxx"></span>

无微或无常

关注

28
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
背景属性（background）及精灵图的使用

background 设置背景的显示方式，是一个间歇属性设置顺序为：background-color background-image background-repeat background-attachment background-position可以设置如下属性：background-color 背景颜色background-image 背景图片background-repeat 背景平铺方式background-attachment 背景图片固定方式。
复制链接

扫一扫