一、背景半透明

CSS3支持背景半透明的写法，颜色值增加了一种 rgba 模式。 rgba 模式：在 rgb基础上增加了一个不透明度的设置，不透明度 alpha 取值范围在 0-1 之间，0 表示完全透明，1 表示完全不透明，0.5 表示半透明。书写方式：rgba(红色，绿色，蓝色，不透明度) 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响，是2个单独存在的东西，不是一起的。

二、半透明其他应用

同样，可以给文字和边框透明，都是 rgba 的格式来写。

三、背景缩放 background-size

通过 background-size 设置背景图片的尺寸，就像我们设置 <img> 的尺寸一样，在移动 Web 开发中做屏幕适配应用非常广泛。注意：它不可以用background属性进行简写，只能单独设置该属性。

示例1：像素px值设置一个的情况下，那么水平方向改变，那么垂直方向会自动等比例缩放

示例2：像素px值设置2个的情况下，那么水平方向和垂直方向单独设置不一样的宽度和高度

示例3：自动撑满盒子的宽高度进行缩放，被溢出部分会隐藏。

示例4：自动撑满盒子的宽高度进行缩放，保证图片始终完整的显示再背景区域，不会溢出。

四、多背景

CSS3 中规定，一个盒子上，可以添加多个背景图片。 background-image 的属性值书写时，以逗号分隔多背景的 URL路径地址。注意：背景加载时，先写的背景压盖后写的背景图片。

示例：通过示例我们看到，我们先写的hat帽子图片，后写的logo图片，所以先写的覆盖了后写的，logo图片被帽子图片层叠再了下面。

（17）css3新增背景属性相关推荐

css3新增的属性和用法
css3 就是css第3个版本增加了一些选择器,布局,动画,背景,新盒模型,私有前缀. 选择器表单选择器 :focus 聚焦选择器选择的是当下被聚焦的表单元素 input:focus {} :c ...
什css3新增的属性,CSS
1.文本阴影属性 text-shadow:10px 10px 10px red; 注: 第一个值 : 水平方向的距离 (必须有的:支持负值) 第二个值 : 垂直方向的距离 (必须有的:支持负值) 第三 ...
css3之背景属性之background-size
一.相关属性: background-image: url("./img/a.jpg"); //设置元素背景图片 background-repeat: repeat/no-repe ...
css3新增动画属性（过度动画变形动画关键帧动画）
目录过度动画transition 多属性值过渡 2d变形transform 平移应用:实现居中(不要求知道盒子的宽高) 缩放旋转倾斜修改变形中心的属性变形属性的复合写法 3D变形动画 3d ...
CSS3新增定位属性sticky，粘性定位
position:sticky sticky 英文字面意思是粘,粘贴. 这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特 ...
CSS3新增-属性（长度颜色背景）选择器-盒子模型
属性(长度颜色背景)选择器-盒子模型 1 CSS3 基本语法 1.1 CSS3 浏览器私有前缀 Chorme: -webkit- Safari: -webkit- IE; -ms- Firefox: ...
html5中css新增的属性,css3有哪些新增属性？常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...
css3新增属性有哪些？css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 我的学习交 ...
CSS3新增属性大全！
1 CSS3 基本语法 1.1 CSS3 浏览器私有前缀 Chorme: -webkit- Safari: -webkit- IE; -ms- Firefox: -moz- Opera: -o- 1. ...

（17）css3新增背景属性