学习笔记第六章使用CSS美化图片

第六章使用CSS美化图片

6.1 在网页中插入图片

GIF图像
1. 跨平台能力，无兼容性问题；
2. 具有减少颜色显示数目而极度压缩文件的能力，不会降低图像的品质（无损压缩）；
3. 支持背景透明功能，便于图像融合到其它背景色中；
4. 可以储存多张，实现动态显示。
JPEG图像
1. 有损压缩，部分细节会被忽略；
2. 跨平台，与GIF格式相同；
3. 支持1670万种颜色，很好地再现摄影图像；
4. 不支持背景透明和交错显示功能。
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%大小，然后分别放在网页中和一个固定大小的盒子中，显示效果不同。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>大小对比</title>
 6     <style type="text/css">
 7         div{
 8             height:200px;                       /*固定盒子的高度*/
 9             width:50%;                           /*设计弹性宽度*/
10             border:solid 1px red;              /*定义盒子的边框，便于观察*/
11         }
12         img{
13             height:50%;
14             width:50%;
15         }
16     </style>
17 </head>
18 <body>
19 <div><img src="task_1_3_1.png"/></div>
20 <img src="task_1_3_1.png"/>
21 </body>
22 </html>

注意：当为图像仅定义宽度或高度，则浏览器能够自动调整纵横比，使宽和高能够协调缩放，避免图像变形。但是一旦为图像同时定义宽和高，则浏览器会根据定义来解析图像。

6.2.2 定义图像边框

图像在默认状态下不会显示边框，但在为图像定义超链接时会显示2~3像素宽的蓝色粗边框。使用border属性可以清除这个边框，代码如下：

<a href="#"><img src="image/1.gif" alt="登陆" border="0"/></a>

或者：
img {border:none;}

1、边框样式

边框样式可以使用border-style属性来定义。边框样式包括两种：虚线框和实线框。虚线框包括dotted（点线）和dashed（虚线）。示例代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>虚线框</title>
 6     <style type="text/css">
 7         img{width:250px;margin:12px;}
 8         .dotted{border-style:dotted;}
 9         .dashed{border-style:dashed;}
10     </style>
11 </head>
12 <body>
13 <img class="dotted" src="task_1_3_1.png" alt="点线边框"/>
14 <img class="dashed" src="task_1_3_1.png" alt="虚线边框"/>
15 </body>
16 </html>

边框（点线与虚线）

实线框包括实线（solid）、双线（double）、立体凹槽（groove）、立体凸槽（ridge）、立体凹边（inset）、立体凸边（outset）。其中实线（solid）应用最广。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>实线框</title>
 6     <style type="text/css">
 7         img{width:350px;margin:12px;}
 8         .solid{border-style:solid;}
 9         .double {border-style:double ;}
10         .groove {border-style:groove ;}
11         .ridge {border-style:ridge ;}
12         .inset {border-style:inset ;}
13         .outset {border-style:outset ;}
14     </style>
15 </head>
16 <body>
17 <img class="solid" src="task_1_3_1.png" alt="实线边框"/>
18 <img class="double" src="task_1_3_1.png" alt="双线"/>
19 <img class="groove" src="task_1_3_1.png" alt="立体凹槽"/>
20 <img class="ridge" src="task_1_3_1.png" alt="立体凸槽"/>
21 <img class="inset" src="task_1_3_1.png" alt="立体凹边"/>
22 <img class="outset" src="task_1_3_1.png" alt="立体凸边"/>
23 </body>
24 </html>

实线框

拓展：如果单独定义某边边框样式，可以使用如下样式：border-top-style、border-right-style、border-bottom-style、border-left-style。

2、边框颜色和宽度

使用CSS的border-color可以定义边框的颜色，颜色取值可以是任何有效的颜色表示法。使用border-width可以定义边框的粗细，取值可以时任何长度单位，但不能使用百分比单位。

当元素的边框样式为none时，所定义的边框颜色和边框宽度都会无效，边框宽度默认为2~3px。

属性取值的顺序为：顶部、右侧、底部、左侧。

定义单边边框的颜色/宽度的方法与定义单边边框样式的方法类似。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>边框颜色与宽度</title>
 6     <style type="text/css">
 7         img{
 8             width:200px;
 9             margin:12px;
10             border:300px solid;
11             border-color:red blue green yellow;
12         }
13     </style>
14 </head>
15 <body>
16 <img class="border" src="task_1_3_1.png" alt="颜色、宽度"/>
17 </body>
18 </html>

边框颜色与宽度

6.2.3 定义图像不透明度

在CSS3中，使用opacity可以设计图像的不透明度。该属性的基本用法为：opacity:0~1;。

目前支持opacity的浏览器有Firefox、Safari、Opera、Chrome和IE8+。早期IE浏览器使用CSS滤镜定义透明度。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>图像不透明度</title>
 6     <style type="text/css">
 7         img{
 8             width:400px;
 9             margin:12px;
10         }
11         .opacity {
12             opacity:0.3;
13         }
14     </style>
15 </head>
16 <body>
17 <img class="opacity" src="task_1_3_1.png" alt="透明度"/>
18 <img src="task_1_3_1.png" alt="对照"/>
19 </body>
20 </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%的椭圆圆角。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>圆角图像</title>
 6     <style type="text/css">
 7         img{
 8             width:400px;
 9             margin:12px;
10         }
11         .r1{
12             border-radius:100px;
13         }
14         .r2{
15             border-radius:50%;
16         }
17     </style>
18 </head>
19 <body>
20 <img class="r1" src="task_1_3_1.png" alt="圆角图像"/>
21 <img class="r2" src="task_1_3_1.png" alt="椭圆图像"/>
22 </body>
23 </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 图文混排

本节所讲的图文混排，主要是文字围绕在图片的旁边进行显示。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>图文混排</title>
 6     <style type="text/css">
 7         .pic_news {width:600px;}
 8         h2{
 9             font-family:"隶书";
10             font-size:24px;
11             text-align:center;
12         }
13         img{
14             width:100px;
15             float:left;  /*使图片旁边的文字产生浮动效果*/
16             margin-right:5px;
17             height:250px;
18         }
19         p{
20             display:inline;/*取消段落p标签的块属性*/}
21     </style>
22 </head>
23 <body>
24 <div class="pic_news">
25     <h2>儿童节的来历</h2>
26 <p><img class="r1" src="task_1_3_1.png" alt="圆角图像"/></p>
27 <p>六一儿童节，也叫“六一国际儿童节”，每年6月1日举行，是全世界少年儿童的节日。</p>
28 <p>1942年6月，德国法西斯枪杀了捷克利迪策村16岁以上的男性公民140余人和全部婴儿，并把妇女和90名儿童押往集中营。村里的房舍、建筑物
29 均被烧毁，好端端的一个村庄就这样被德国法西斯给毁了</p>
30 <p>为了悼念利迪策村和全世界所有在法西斯侵略战争中死难的儿童，1949年11月，国际民主妇女联合会在莫斯科举行理事会议，中国和各国代表
31 愤怒地揭露了帝国主义分子和各国反动派残杀、毒害儿童的罪行。为了保障世界各国儿童的生存权、保健权和受教育权，为了改善儿童的生活，会
32     议决定以每年的6月1日为国际儿童节。</p>
33 </div>
34 </body>
35 </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 ] {1,2} | 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>]+)

posted @ 2017-11-28 10:13 金牛acho 阅读(492) 评论(0) 编辑收藏举报

刷新页面返回顶部

学习笔记 第六章 使用CSS美化图片

第六章 使用CSS美化图片