CSS中背景颜色、背景图片、渐变色、背景定位、精灵图（雪碧图）介绍

背景background:

背景可以设置为颜色和图片，设置为图片时，可以对图片继续设置。

background-color:设置背景颜色：

其颜色的取值方式前面提到过，和color的取值一样，但是默认值transparent透明

 body {background-color: #332211;}

background-image:设置背景图片：

其值为：none默认值无背景、url(图片地址)，图片地址无需加引号。

 body {background-image: url(images/test.jpg);}

渐变色：

background的一个属性值，一种颜色向另一种颜色平滑地过渡的效果，分线性渐变和径向渐变、角向渐变;

线性渐变语法：

linear-gradient(颜色起始百分比 , 颜色结束百分比),线性渐变默认方向是从上到下，若要是改为水平方向的渐变则需要在括号最前面加to right等方位或角度（45deg）,如：

 div {background:linear-gradient(to right,red 0%,yellow 50%,#ff00aa 100%)}

径向渐变语法：

radial-gradient(颜色起始百分比 , 颜色结束百分比),径向渐变默认方向是从中心内到外，若要改变渐变圆心位置则需要在括号最前面加at top等方位或值（at 10px 20px）

 div {background-image:radial-gradient(at top,red 0%,yellow 50%,#ff00aa 100%)}

渐变重复：

渐变重复只需要在radial-gradient和linear-gradient前面加前缀repeating，如

 div {background-image:repeating-radial-gradient(at top,red 0%,yellow 50%,#ff00aa 100%)，repeating-linear-gradient（to right, blue 0%,yellow 100%);}

background-repeat:设置背景是否平铺：

其值：默认值repeat水平垂直平铺、no-repeat不平铺、repeat-x水平平铺、repeat-y垂直平铺

 body {background-repeat: no-repeat;}

★★background-image和background-color可以同时使用，此时图片设置为不平铺，图片占不到的空白部分显示background-color

background-size:设置背景大小：

其属性值为一对尺寸，前面的是width，后面的是height，此属性是背景缩放，并非背景裁剪,当给一个值或另一个值为auto时，图片等比例缩放，此属性值还可以给关键词：contain一边触碰到边框后大小确定、cover铺满整个元素、

 div {background-size: 300px 50%;}

background-origin背景图片显示基点:

其值：padding-box内边距开始显示背景，boder-box边框开始显示背景、content-box内容区开始显示背景图片

 div {background-origin: border-box;}

background-clip:背景裁剪：

其值：content-box裁掉内容区以外的背景、padding-box裁掉内边距以外的背景、border-box裁掉边框以外的背景

 div {background-clip: border-box;}

background-position:定位背景图片：

其值为一对或单个;像素值、百分比、方位词（left、right、bottom、top、center），一对值时中间用空格隔开，当值为具体的像素或者百分比时，第一处设置水平方向的位置，第二处设置垂直方向的位置，只有一个像素或百分比值时，设置的是水平方向的定位；当值为方位名词时，没有位置的限制，只有一个方位词时，根据方位词自动识别水平还是垂直方向。无论是具体数值还是方位名词，设置一处时，另一方向默认居中。默认图片居于左上角。

 div {width: 400px;height: 400px;background-color: aqua;background-image: url(捕获.PNG);background-repeat: no-repeat;background-position: center top;}

background-attachement:设置背景图像是否跟随内容滚动（背景附着）：

其值：默认scroll背景相对元素固定，背景随页面滚动而滚动、fixed背景相对视口固定、local相对元素内容固定，随元素内容滚动

 div {background-attachement: fixed;}

背景连写：

背景连写的顺序官方没有强制要求，建议这样写：background:背景颜色背景图片地址背景平铺背景滚动背景位置

 div {background:#000 url(images/bg.jpg) no-repeat fixed center top;}

多重背景：

多重背景是指给一个盒子可以设置多个背景图片，只需要多设置几个背景属性值，中间用逗号隔开即可，颜色需要写在最后，如：

 div {background: url(images/bg.jpg) no-repeat fixed center top,url(images/bg1.jpg) no-repeat fixed center top,url(images/bg2.jpg) no-repeat fixed center top,yellow;}

精灵图（雪碧图）：

在实际开发中，有的时候一个页面会用到好多的图，此时会加重浏览器的负担，为了解决浏览器请求次数负担，可以把这些图放到一张图上面，一次请求到本缓存，利用定位的方式控制每个小图在所在区域显示即可。

 div {width: 50px;height: 50px;background:url(images/bg.png) no-repeat -20px -50px;}

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

CSS中背景颜色、背景图片、渐变色、背景定位、精灵图（雪碧图）介绍相关推荐

css精灵图(雪碧图)切图
css精灵图为了节省网络资源,通常网页上小图标和图片都合成在一张图片上,到使用的时候再切图雪碧图切图简单过程:先在ps中打开,然后通过用矩形覆盖原来图标在图片中的位置,查到目标图标大小,设置宽高, ...
【无标浮动特性应用实例】二、CSS 精灵（雪碧图、精灵图）三、滑动门四CSS 定位{相对定位}
[无标浮动特性应用实例] 总结:浮动脱离文档流不脱离文本流 - 最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐要想图文环绕需要给图片设置浮动应用实例-两列自适应实现要点 ...
CSS Sprites(CSS图片精灵、雪碧图)看这里就够了
CSS Sprites是什么 CSS Sprites是一种网页图片应用处理方式. 又被解释为: CSS精灵 CSS图像拼合 CSS贴图定位 CSS图片精灵 CSS雪碧图图片合成技术 CSS Spri ...
CSS 精灵（雪碧图、精灵图）、滑动门
概述 css精灵英文叫法 css sprites,通常被解释为"CSS 图像拼合"或"CSS 贴图定位":其实就是把网页中一些背景图片整合到一张图片文件中,再 ...
CSS的背景——颜色，图片，背景图片位置，
1 颜色--代码展示 <style> div { width: 200px; height: 200 ...
CSS 精灵（雪碧图、精灵图）
学习目标能够说出什么是CSS精灵掌握CSS精灵在实际示案例中的应用概述 css精灵英文叫法 css sprites,通常被解释为"CSS 图像拼合"或"CSS 贴图 ...
二、CSS 精灵（雪碧图、精灵图）
- 能够说出什么是CSS精灵 - 掌握CSS精灵在实际示案例中的应用 ### 概述 css精灵英文叫法 css sprites,通常被解释为"CSS 图像拼合"或"CSS ...
教你玩转CSS 精灵图/雪碧图
目录精灵图/雪碧图图像拼合 - 简单实例图像拼合 - 创建一个导航列表图像拼合s - 悬停效果精灵图/雪碧图精灵图/雪碧图就是图像拼合也就是单个图像的集合. 有许多图像的网页可能需要很长 ...
HTML+CSS 背景之雪碧图+渐变
一:雪碧图雪碧图是什么? 一个页面可能会用到多个图片或者图标,如果每个图片都是一个单独的文件,则需要浏览器进行多次加载,浪费性能和带宽. 而且在某也情况下图片会延迟加载,导致用户体验不好. 将多个图 ...
前端基础入门之背景background-image 、雪碧图与渐变
文章目录背景 1. PS 的基本设置 2. 背景练习 1:线性渐变效果的背景图练习 2:按钮点击效果雪碧图与渐变 3. 雪碧图 4. 线性渐变 5. 径向渐变背景 1. PS 的基本设置工 ...

CSS中背景颜色、背景图片、渐变色、背景定位、精灵图（雪碧图）介绍

CSS中背景颜色、背景图片、渐变色、背景定位、精灵图（雪碧图）介绍相关推荐

最新文章

热门文章