第六章 使用CSS美化图片
6.1 在网页中插入图片
-
GIF图像
- 跨平台能力，无兼容性问题；
- 具有减少颜色显示数目而极度压缩文件的能力，不会降低图像的品质（无损压缩）；
- 支持背景透明功能，便于图像融合到其它背景色中；
- 可以储存多张，实现动态显示。
-
JPEG图像
- 有损压缩，部分细节会被忽略；
- 跨平台，与GIF格式相同；
- 支持1670万种颜色，很好地再现摄影图像；
- 不支持背景透明和交错显示功能。
PNG图像
具有GIF和JPEG的双重优点。新的无损压缩文件格式，支持1670万种颜色，支持索引度、灰度、真彩色图像以及Alpha通道透明。
如果颜色少于256色时，建议使用GIF格式，如logo等；
如果颜色较丰富时，应使用JPEG格式，如自然画面的图像。
在HTML种，使用<img>标签可以把图像插入到网页中，用法如下：
<img src="URL" alt="替代文本“/>
从技术上分析，<img>标签不会再网页种插入图像，而是从网页上链接图像，<img>标签创建的是被引用图像的占位空间。
- src：定义显示图像的URL；
- alt：设置图像的替代文本。
6.2 设置图像样式
HTML5为<img>定义了多个可选属性：
- height：定义图像的高度，单位可以是像素或者百分比；
- width：定义图像的宽度，单位可以是像素或者百分比；
- ismap：将图像定义为服务器端图像映射；
- usemap：将图像定义为客户端图像映射；
- longdesc：指向包含长的图像描述文档的URL。
6.2.1 定义图像大小
<img>标签包含height和width属性，使用它们可以控制图像的大小。CSS提供了更符合标准的width和height属性，使用这两个属性可以实现结构与表现相分离。
示例，统一定义图像缩小50%大小，然后分别放在网页中和一个固定大小的盒子中，显示效果不同。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大小对比</title>
<style type="text/css">
div{
height:200px; /*固定盒子的高度*/
width:50%; /*设计弹性宽度*/
border:solid 1px red; /*定义盒子的边框，便于观察*/
}
img{
height:50%;
width:50%;
}
</style>
</head>
<body>
<div><img src="task_1_3_1.png"/></div>
<img src="task_1_3_1.png"/>
</body>
</html>
注意：当为图像仅定义宽度或高度，则浏览器能够自动调整纵横比，使宽和高能够协调缩放，避免图像变形。但是一旦为图像同时定义宽和高，则浏览器会根据定义来解析图像。
6.2.2 定义图像边框
图像在默认状态下不会显示边框，但在为图像定义超链接时会显示2~3像素宽的蓝色粗边框。使用border属性可以清除这个边框，代码如下：
<a href="#"><img src="data:image/1.gif" alt="登陆" border="0"/></a>
或者：
img {border:none;}
1、边框样式
边框样式可以使用border-style属性来定义。边框样式包括两种：虚线框和实线框。虚线框包括dotted（点线）和dashed（虚线）。示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>虚线框</title>
<style type="text/css">
img{width:250px;margin:12px;}
.dotted{border-style:dotted;}
.dashed{border-style:dashed;}
</style>
</head>
<body>
<img class="dotted" src="task_1_3_1.png" alt="点线边框"/>
<img class="dashed" src="task_1_3_1.png" alt="虚线边框"/>
</body>
</html>
边框（点线与虚线）
实线框包括实线（solid）、双线（double）、立体凹槽（groove）、立体凸槽（ridge）、立体凹边（inset）、立体凸边（outset）。其中实线（solid）应用最广。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实线框</title>
<style type="text/css">
img{width:350px;margin:12px;}
.solid{border-style:solid;}
.double {border-style:double ;}
.groove {border-style:groove ;}
.ridge {border-style:ridge ;}
.inset {border-style:inset ;}
.outset {border-style:outset ;}
</style>
</head>
<body>
<img class="solid" src="task_1_3_1.png" alt="实线边框"/>
<img class="double" src="task_1_3_1.png" alt="双线"/>
<img class="groove" src="task_1_3_1.png" alt="立体凹槽"/>
<img class="ridge" src="task_1_3_1.png" alt="立体凸槽"/>
<img class="inset" src="task_1_3_1.png" alt="立体凹边"/>
<img class="outset" src="task_1_3_1.png" alt="立体凸边"/>
</body>
</html>
实线框
拓展：如果单独定义某边边框样式，可以使用如下样式：border-top-style、border-right-style、border-bottom-style、border-left-style。
2、 边框颜色和宽度
使用CSS的border-color可以定义边框的颜色，颜色取值可以是任何有效的颜色表示法。使用border-width可以定义边框的粗细，取值可以时任何长度单位，但不能使用百分比单位。
当元素的边框样式为none时，所定义的边框颜色和边框宽度都会无效，边框宽度默认为2~3px。
属性取值的顺序为：顶部、右侧、底部、左侧。
定义单边边框的颜色/宽度的方法与定义单边边框样式的方法类似。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框颜色与宽度</title>
<style type="text/css">
img{
width:200px;
margin:12px;
border:300px solid;
border-color:red blue green yellow;
}
</style>
</head>
<body>
<img class="border" src="task_1_3_1.png" alt="颜色、宽度"/>
</body>
</html>
边框颜色与宽度
6.2.3 定义图像不透明度
在CSS3中，使用opacity可以设计图像的不透明度。该属性的基本用法为：opacity:0~1;。
目前支持opacity的浏览器有Firefox、Safari、Opera、Chrome和IE8+。早期IE浏览器使用CSS滤镜定义透明度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像不透明度</title>
<style type="text/css">
img{
width:400px;
margin:12px;
}
.opacity {
opacity:0.3;
}
</style>
</head>
<body>
<img class="opacity" src="task_1_3_1.png" alt="透明度"/>
<img src="task_1_3_1.png" alt="对照"/>
</body>
</html>
图像不透明度
6.2.4 定义圆角图像
CSS3新增了border-radius属性，使用它可以设计圆角样式，该属性的基本用法如下：
border-radius:none | <length>{1,4}[/<length>{1,4}]?;
none：默认值，表示元素没有圆角；
<length>：由浮点数字和单位标识符组成的长度值，不可以为负值。
为了方便定义元素的4个顶角圆角，border-radius派生了4个子属性。
- border-top-right-radius：定义右上角的圆角；
- border-right-bottom-radius：定义右下角的圆角：
- border-bottom-left-radius：定义左下角的圆角；
- border-left-top-radius：定义左上角的圆角。
border-radius可以包含两个参数值：第一个表示圆角的水平半径，第二个表示圆角的垂直半径，两个参数值通过斜线分隔。
示例：分别设计两个圆角类样式，第一个为固定12px的圆角，第二个为弹性取值50%的椭圆圆角。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角图像</title>
<style type="text/css">
img{
width:400px;
margin:12px;
}
.r1{
border-radius:100px;
}
.r2{
border-radius:50%;
}
</style>
</head>
<body>
<img class="r1" src="task_1_3_1.png" alt="圆角图像"/>
<img class="r2" src="task_1_3_1.png" alt="椭圆图像"/>
</body>
</html>
圆角图像
当图像宽度与高度相同时，椭圆图像就会变成圆形图像。
6.2.5 定义阴影图像
CSS3新增了box-shadow属性，该属性可以定义阴影效果，用法如下：
box-shadow:none | <shadow> [ , <shadow>]*;
属性的初始值时none，表示元素没有阴影。
<shadow>可以使用公式表示为inset&&[<length>{2,4}&&<color>?]，其中inset表示设置阴影的类型为内阴影，默认为外阴影；<length>是由浮点数字和单位标识符组成的长度值，可取正负值，用来定义阴影的水平偏移值和垂直偏移值，以及阴影大小（即阴影模糊度）、阴影拓展。<color>表示阴影颜色。
6.2.6 图文混排
本节所讲的图文混排，主要是文字围绕在图片的旁边进行显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图文混排</title>
<style type="text/css">
.pic_news {width:600px;}
h2{
font-family:"隶书";
font-size:24px;
text-align:center;
}
img{
width:100px;
float:left; /*使图片旁边的文字产生浮动效果*/
margin-right:5px;
height:250px;
}
p{
display:inline;/*取消段落p标签的块属性*/}
</style>
</head>
<body>
<div class="pic_news">
<h2>儿童节的来历</h2>
<p><img class="r1" src="task_1_3_1.png" alt="圆角图像"/></p>
<p>六一儿童节，也叫“六一国际儿童节”，每年6月1日举行，是全世界少年儿童的节日。</p>
<p>1942年6月，德国法西斯枪杀了捷克利迪策村16岁以上的男性公民140余人和全部婴儿，并把妇女和90名儿童押往*。村里的房舍、建筑物
均被烧毁，好端端的一个村庄就这样被德国法西斯给毁了</p>
<p>为了悼念利迪策村和全世界所有在法西斯侵略战争中死难的儿童，1949年11月，国际*妇女联合会在莫斯科举行理事会议，中国和各国代表
愤怒地揭露了帝国主义分子和各国反动派残杀、毒害儿童的罪行。为了保障世界各国儿童的生存权、保健权和受教育权，为了改善儿童的生活，会
议决定以每年的6月1日为国际儿童节。</p>
</div>
</body>
</html>
图文混排
绝对定位（position：absolute）是可以实现图片定位在某个区域的某个位置，但在图文混排的效果中，但不可以这样做，这是因为：
- 图文混排的效果一般出现在介绍性的内容页面或者新闻内容页面，而这些页面一般情况下不是由页面制作过程中实现，而是在后期网站发布后通过网站的新闻发布系统中发布内容，这样的内容发布模式对于图片的大小，段落的出现，文字排版都是属于不可控的范围，不能因为要实现图文混排而增加后期内容发布的工作时间。
- 使用绝对定位后，图片将脱离文档流，成为页面中具有层叠效果的一个元素，将会覆盖文字。
6.3 设置背景图像
CSS3增强了background属性的功能，允许在同一个元素内叠加多个背景图像。background属性派生了8个子属性：
- background-image：定义背景图像；
- background-color：定义背景颜色；
- background-origin：指定背景的显示区域；
- background-clip：指定背景的裁剪区域；
- background-repeat：设置背景图像是否及如何重复铺排；
- background-size：定义背景图片的大小；
- background-position：设置背景图像位置；
- background-attachment：定义背景图像的显示方式。
6.3.1 定义背景图像
在CSS中可以使用background-image属性来定义背景图像。用法如下：
background-image: none | <url>
如果背景包含透明区域的GIF或PNG格式图像，则被设置为背景图像时，这些透明区域依然被保留。
CSS3支持background-image设置渐变背景，具体用法如下：
background-image: <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
<linear-gradient>：使用线性渐变创建背景图像；
<radial-gradient>：使用径向（放射性）渐变创建背景图像；
<repeating-linear-gradient>：使用重复的线性渐变创建背景图像；
<repeating-radial-gradient>：使用重复的径向（放射性）渐变创建背景图像。
线性渐变：
line-gradient([[[to top | to bottom] || [to left | to right] ] || <angle>, ]?<color-stop>[ , <color-stop>+);
径向渐变：
radial-gradient([[<shape>||<size>][at<position>]?,|at<position>,]?<color-stop>[,<color-stop>]+)
- <position>：定义渐变起始点，取值包含数值、百分比，也可以使用关键字，其中left、center和right定义x轴坐标，top、center和bottom定义y轴坐标，当指定一个值时，另一个值默认为center。
- <angle>：定义直线渐变的角度。单位包括deg（度）、grad（梯度，90deg=100grad）、rad（弧度，一圈等于2*PI rad）。
- <stop>：定义步长，包括两个参数，其中第一个参数值设置颜色值，可以为任何合法的颜色值；第二个参数设置颜色的位置，取值为百分比或数值，也可以省略步长位置。
- <shape>：定义径向渐变的形状，包括circle和ellipse（椭圆），默认值为ellipse。
- <size>定义圆半径，或者椭圆的轴长度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图像</title>
<style type="text/css">
body{
margin:30px auto;
background:#ededed;
}
.blue {
color:#d9eef7;
height:100px;
width:400px;
margin:auto;
line-height:100px;
text-align:center;
border:solid 1px #0076a3;
background:#0095cd;
background:linear-gradient(to bottom,#00adee,#0078a5);
text-shadow:0 1px 1px rgba(0,0,0,0.3);
border-radius:1em;
box-shadow:0 1px 2px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="blue">
设计渐变图像
</div>
</body>
</html>
背景图像
6.3.2 定义显示方式
CSS使用background-repeat属性控制背景图像的显示方式，用法如下：
background-repeat:repeat-x | repeat-y | [repeat | space | round |no-repeat]{1,2}
取值说明如下：
- repeat-x：背景图像在横向上平铺；
- repeat-y：背景图像在纵向上平铺；
- repeat：背景图像在横向和纵向平铺；
- no-repeat：背景图像不平铺；
- round：背景图像自动缩放直到适应且填充满整个容器，仅CSS3支持；
- space：背景图像以相同的间距平铺且填充满整个容器或某个方向，仅CSS3支持。
6.3.3 定义显示位置
默认情况下，背景图像显示在元素的左上角，并根据不同方式执行不同显示效果。
background-position属性取值包括两个值，分别用来定位背景图像的x轴、y轴坐标，取值单位没有限制。
默认值为0%0%，相当于left top。
6.3.4 定义固定背景
background-attachment能够固定背景图像始终显示在浏览器窗口中的某个位置，取值如下：
- fixed：背景图像相对于浏览器窗体固定；
- scroll：默认值，背景图像相对于元素固定，元素内容滚动时背景图像不会跟着滚动；
- local：背景图像相对于元素内容固定，当元素内容滚动时背景图像跟着滚动，该属性仅CSS3支持。
6.3.5 定义坐标
background-orign属性定义background-position的参考位置。取值如下：
- border-box：从边框区域开始显示背景；
- padding-box：从补白区域开始显示背景；
- content-box：在内容区域显示背景。
6.3.6 定义裁剪区域
background-clip属性定义背景图像的裁剪区域，取值于background-orign相似：
- border-box：从边框区域向外裁剪背景；
- padding-box：从补白区域向外裁剪背景；
- content-box：从内容区域向外裁剪背景；
- text：从前景内容（如文字）向外裁剪背景。
6.3.7 定义大小
background-size：【】
background-size:[<length> | <percentage> | auto ] {,} | cover | contain;
取值说明如下：
- <length>：浮点数字和单位标志符组成，不可以为负值；
- <percentage>：取值范围为0%到100%，不可为负值；
- cover：保持背景图像本身的宽高比例，将图片缩放到正好完全覆盖所定义背景的区域；
- contain：保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应所定义背景的区域。
6.3.8 定义循环方式
在CSS3中，可以使用background-break属性定义平铺内联元素背景图像时的循环方式。
取值包括bounding-box、each-box和continuou，只能在Firefox浏览器使用。
6.3.9 定义多背景图
6.4 定义渐变背景
基于CSS3的渐变便于修改，支持无级缩放，过渡更加自然。目前，CSS渐变设计还没有统一的标准，不同渲染引擎实现渐变的语法不同。
6.4.1 设计Webkit渐变
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]?[,<stop>]*)
- <type>：定义渐变类型，包括线性渐变（linear）和径向渐变（radial）；
- <point>：定义渐变起始点和结束点坐标，开始应用渐变的x轴和y轴坐标，以及结束渐变的坐标；
- <radius>：定义径向渐变时，用来设置径向渐变的长度，该参数为一个数值；
- <stop>：定义渐变色和步长，包括3个类型值
- 开始的颜色，使用from（colorvalue）函数定义；
- 结束的颜色，使用to（colorvalue）函数定义；
- 颜色步长，使用colorstop（value，colorvalue）定义。第一个参数值为一个数值或百分比（0%到100%），第二个参数值表示任意颜色值。
6.4.2 设计Gecko渐变
Gecko引擎定义了两个私有函数，分别用来设计直线渐变和径向渐变，语法如下：
-moz-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)
- <point>：定义渐变起始点，取值包括数值、百分比和关键字（left、center、right、top和bottom）；
- <angle>：定义线性渐变的角度，单位包括deg（度）、grad（梯度，90度等于100梯度）、rad（弧度，一圈等于2*π rad）；
- <stop>：定义步长，可以省略。用法与Webkit引擎的color-stop（）函数类似，但是该参数不需要调用函数，直接传递参数即可。
-moz-radial-gradient([<position>||<angle>,]?[<shape>||<size>,]?<stop>,<stop>[,<stop>*)
<point>：与线性渐变<point>属性相同；
- <angle>：与线性渐变<angle>属性相同；
- <shape>：定义径向渐变的形状，包括circle（圆）和ellipse（椭圆），默认值为ellipse；
- <size>：定义圆半径，或者椭圆的轴长度；
- <stop>：定义步长，与线性渐变<stop>属性相同。
6.4.3 设计W3C渐变
W3C标准草案沿袭Gecko引擎的渐变设计方法，语法和用语也基本相同。
- 线性渐变：
linear-gradient([<angle>| to<side-or-corner>],]?<color-stop>[,<color-stop>]+)
- 径向渐变：
radial-gradient([<shape>||<size>][at<position>]?,|at<position>, ]?<color-stop>[ ,<color-stop>]+)