为了丰富网页的样式功能，去掉一些多余的样式代码，CSS3增加了一些新的包模型属性，比如颜色透明度、圆角、阴影、渐变等。本节将详细介绍这个新的CSS样式属性。
1. 颜色透明度
通过引入RGBA模式和opacity属性圆角边框 css3，设置背景和图像的不透明度。
p{background-color:rgba(255,0,0,0.5);}
opacity属性用于定义标签的不透明度，参数opacityValue代表不透明度值，是0到1之间的浮点值。其中0表示完全透明，1表示完全不透明，0.5表示半透明。
二、鱼片
在网页设计中，我们经常会听到一些带有圆角的图形，比如按钮、头像图片等，利用CSS3中的border-radius属性，可以将圆形边框的四个角进行圆角处理，从而达到圆角的效果。
需要注意的是，使用值复制原理设置圆角边框时，如果省略“垂直直径参数”圆角边框 css3，则默认等于“水平直径参数”的参数值。 圆角的水平和垂直直径现在相等。
<html><head><meta charset="utf-8"><title>圆角边框</title><style type="text/css">img{border-radius:50%;}</style></head><body><img class="circle" src="2.jpg" alt="图片"/></body></html>
疗效如图：
3、图片边框
在网页设计中，我们还可以使用图像作为元素的边框。 使用 CSS3 中的 border-image 属性可以轻松实现这种效果。
<html><head><meta charset="utf-8"><title>图片边框</title><style type="text/css">p{width:362px;height:362px;border-style:solid;border-image-source:url(3.png); /*设置边框图片路径*/border-image-slice:33%; /*边框图像顶部、右侧、底部、左侧向内偏移量*/border-image-width:40px; /*设置边框宽度*/border-image-outset:0; /*设置边框图像区域超出边框量*/border-image-repeat:repeat; /*设置图片平铺方式*/}</style></head><body><p></p></body></html>
疗效如图：
文章目录
CSS背景
通过CSS背景属性css3 背景图css3 背景图，您可以为页面元素添加背景样式。
背景属性可以设置颜色、背景图片、背景图片位置、背景图片固定等。
背景颜色
背景颜色属性定义元素的背景颜色。
background-color:颜色值；
通常，元素的背景色的默认值是透明的（透明），我们也可以自动将背景色称为透明色。
句型：
background-color:transparent;
案件：
<head>
<style>
div {
width: 200px;
height: 200px;
/* background-color: transparent;透明的 清澈的 */
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
背景图片
background-image 属性描述了元素的背景图像。 在实际开发中，经常会在logo或者一些装饰性的小图片或者超大的背景图片中看到。 优点是特别容易控制位置（精灵图也是一种使用场景）。
background-image : none | url (url)
参数值效果
没有任何
无背景图像（默认）
网址
使用绝对或相对地址指定背景图像
案件：
<head>
<style>
div {
width: 200px;
height: 200px;
/* 不要落下url() */
background-image: url(images/logo.png);
}
</style>
</head>
<body>
<div></div>
</body>
注意：不要忘记将 URL 添加到背景图像旁边的地址，并且不要在上面的路径中添加破折号。
背景平铺
如果需要在HTML页面上平铺背景图片，可以使用background-repeat属性。
参数值效果
重复
背景图像水平和垂直平铺（默认）
不重复
背景图像未平铺
重复-x
背景图像垂直平铺
重复y
背景图像水平平铺
句型：
background-repeat: repeat | no-repeat | repeat-x | repeat-y|
案件：
<head>
<style>
div {
width: 200px;
height: 200px;
background-image: url(images/logo.png);
background-color: pink;
/*背景不平铺*/
/* background-repeat: no-repeat; */
/*平铺*/
/* background-repeat: repeat; */
/*沿着x轴平铺*/
/* background-repeat: repeat-x; */
/*沿着y轴平铺*/
background-repeat: repeat-y;
/*页面元素既可以添加背景图片又可以添加背景图片，只不过背景图片会压住背景颜色*/
}
</style>
</head>
<body>
<div></div>
</body>
背景图像的位置
可以借助背景位置属性更改图像在背景中的位置。
句型：
background-postion:x,y;
该参数的含义是：x坐标和y坐标。 可以使用位置名词或精确单位。
参数值说明
长度
百分比、百分比、由浮点数和单位指示符组成的宽度
职位
上、中、下、左、中、右位置名词
案件：
<head>
<style>
h3 {
/*宽高*/
width: 118px;
height: 40px;
/*背景颜色*/
background-color: pink;
/*字号*/
font-size: 14px;
/*不加粗，700是加粗*/
font-weight: 400;
/*背景图片的位置*/
background-image: url(images/icon.png);
/*背景不平铺*/
background-repeat: no-repeat;
/*背景的位置*/
background-position: left center;
/*文字居中*/
line-height: 40px;
/*首行缩进*/
text-indent: 1.5em;
}
</style>
</head>
<body>
<h3>成长守护平台</h3>
</body>
计划：
1. 参数位置名词
案件：
<head>
<style>
div {
width: 280px;
height: 300px;
background-image: url(images/logo.png);
background-color: pink;
background-repeat: no-repeat;
/* background-position: 方位名词; */
/* background-position: center top; */
/* background-position: right center; */
/*如果是方位名词 right center 和 center right 效果是等价的 跟顺序没有关系*/
/* background-position: center right ; */
/*此时 水平一定是靠右侧对齐，第二个参数省略 y轴是 垂直居中显示的*/
/* background-position: right; */
/*此时 第一个参数一定是 top y 轴顶部对齐 第二个参数省略x 轴 是水平居中显示的*/
background-position: top;
}
</style>
</head>
<body>
<div></div>
</body>
2.参数为精确单位
案件：
<head>
<style>
div {
width: 280px;
height: 300px;
background-image: url(images/logo.png);
background-color: pink;
background-repeat: no-repeat;
/*20px 50px; x轴一定是20 y轴一定是50*/
/* background-position: 20px 50px; */
/* background-position: 50px 20px; */
/*默认数值为x坐标，另一个值默认垂直居中*/
background-position: 20px;
}
</style>
</head>
<body>
<div></div>
</body>
3、参数为混合单位
如果指定的两个值是精确单位和方向名词的混合，则第一个值是 x 坐标，第二个值是 y 坐标。
案件：
<head>
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
background-image: url(images/logo.png);
background-repeat: no-repeat;
/*20px center 一定是x 为20 y是center 等价于background-position:20px;*/
/* background-position: 20px; */
/*水平居中对齐 垂直是20*/
background-position: center 20px;
}
</style>
</head>
<body>
<div></div>
</body>
背景图像固定（附背景）
background-attachment 属性设置背景图像是固定的还是与页面的其余部分一起滚动。
视差滚动的效果可以在背景附着的后期产生。
句型：
background-attachement : scroll | fixed
属性值
参数作用
滚动
背景图像是否随对象内容滚动？ （默认）
固定的
背景图像固定
案件：
<head>
<style>
body {
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
/*把背景图固定住*/
background-attachment: fixed;
color: #fff;
font-size: 20px;
}
</style>
</head>
<body>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
</body>
背景综合写作
为了简化background属性的代码，我们可以将该属性合并缩写到同一个属性background中。 从而节省代码量。
当时没有具体的书写顺序，习惯的顺序通常是这样的：
背景：背景颜色、背景图地址、背景平铺、背景图滚动、背景图位置；
句型：
background: transparent url(image.jpg) repeat-y fixed top;
案件：
<head>
<style>
body {
/* background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center top; */
/*把背景图固定住*/
/* background-attachment: fixed; */
/* background: 背景颜色、背景图片地址、背景平铺、背景图像滚动、背景图片位置； */
background: black url(images/bg.jpg) no-repeat fixed center top;
color: #fff;
font-size: 20px;
}
</style>
</head>
<body>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
<p>奶盖不配有对象</p>
</body>
这是实际开发中比较提倡的写法。
背景颜色半透明
CSS给我们带来了半透明的效果
句型：
background: rgba(0,0,0,0.3);
案件：
<head>
<style>
div {
width: 300px;
height: 300px;
/* background-color: black; */
/* background:rgba(0, 0, 0, 0.3); */
/*习惯把0.3的0 省略掉*/
background: rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div></div>
</body>
后台摘要属性操作值
背景颜色
背景颜色
预定义颜色值/十六进制/RGB代码
背景图
背景图片
url（图片路径）
背景重复
是否平铺
重复/不重复/重复-x/重复-y
背景位置
背景位置
长度/位置分别是 x 和 y 坐标
背景附件
背景附件
滚动（背景滚动）/固定（背景固定）
背景缩写
写作变得更容易
背景颜色、背景图片、背景平铺、背景滚动、背景位置；
背景颜色半透明
背景颜色半透明
背景：rgba(0,0,0,0.3); 前面必须有 4 个值
