第六章使用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%大小，然后分别放在网页中和一个固定大小的盒子中，显示效果不同。

 <!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>]+)

学习笔记第六章使用CSS美化图片的更多相关文章

学习笔记第七章使用CSS美化超链接
第7章使用CSS美化超链接学习重点认识超链接熟悉伪类定义超链接样式能够灵活设计符合页面风格的链接样式 7.1 定义超链接在HTML5中建立超链接需要两个要素:设置为超链接的网页元素和 ...
学习笔记第五章使用CSS美化网页文本
第五章使用CSS美化网页文本学习重点定义字体类型.大小.颜色等字体样式: 设计文本样式,如对齐.行高.间距等: 能够灵活设计美观.实用的网页正文版式. 5.1 字体样式 5.1.1 定义字体 ...
JVM学习笔记-第六章-类文件结构
JVM学习笔记-第六章-类文件结构 6.3 Class类文件的结构本章中,笔者只是通俗地将任意一个有效的类或接口锁应当满足的格式称为"Class文件格式",实际上它完全不需要以磁 ...
C Primer Plus 学习笔记 -- 前六章
记录自己学习C Primer Plus的学习笔记第一章 C语言高效在于C语言通常是汇编语言才具有的微调控能力设计的一系列内部指令 C不是面向对象编程编译器把源代码转化成中间代码,链接器把中间代码和 ...
Linux学习笔记(第六章)
第六章-档案权限与目录配置#chgrp:改变档案的所属群组#chown:改变档案的拥有者#chmod:改变档案的权限及属性 chown用法 chmod用法: r:4 w:2 x:1对于文档: 对于目录 ...
o'Reill的SVG精髓（第二版）学习笔记——第六章
第六章:坐标系统变换想要旋转.缩放或者移动图片到新的位置.可以给对应的SVG元素添加transform属性. 6.1 translate变换可以为<use>元素使用x和y属性,以在特性 ...
Java 学习笔记 ------第六章继承与多态
本章学习目标: 了解继承的目的了解继承与多态的关系知道如何重新定义方法认识java.lang.object 简介垃圾回收机制一.继承继承是java面向对象编程技术的一块基石,因为它允许创建分 ...
《Python基础教程（第二版）》学习笔记 -> 第六章抽象
抽象和结构本章将会介绍如何让将语句组织成函数,还会详细介绍参数(parameter)和作用域(scope)的概念,以及递归的概念及其在程序中的用途. 创建函数函数可以调用,它执行某种行为,并返回某 ...
[Python学习笔记][第六章Python面向对象程序设计]
1月29日学习内容 Python面向对象程序设计类的定义与使用类定义语法使用class关键词 class Car: def infor(self): print("This is ca ...

随机推荐

在windows cgywinportable上，通过运行linux命令，批量改动文件名。
在windows cgywinportable上.通过运行linux命令.批量改动文件名. 实例:将当前文件夹下的全部文件名称加上.sql find ./ -type f -exec mv {} ' ...
jquery 动态绑定bind()及模拟鼠标点击A链接
近来自觉前端有小小进步,幸而记之. 1.两个 css class 紧挨在一起则在html元素中,要同时拥有这两个class,才能起作用 .block.db{ background-image:url ...
ubuntu安装jdk 1.6
linux下安装JDK1.6 1. 去http://java.sun.com/j2se/1.4.2/download.html 下载一个Linux Platform的JDK,建议下载RPM自解压格式的 ...
webstorm使用帮助（转自http://my.oschina.net/longteng2013/blog/138010），另外有部分内容摘自其它人博客
为了更高效的开发代码,这里列出了一些webstorm的快捷键和zencoding 发表于1 年前(2013-06-17 00:19) 阅读(2101) | 评论(2) 11人收藏此文章, 我要收 ...
POJ - 1459 Power Network（最大流）（模板）
1.看了好久,囧. n个节点,np个源点,nc个汇点,m条边(对应代码中即节点u 到节点v 的最大流量为z) 求所有汇点的最大流. 2.多个源点,多个汇点的最大流. 建立一个超级源点.一个超级汇点,然 ...
hdu-4118 Holiday's Accommodation(树形dp+树的重心)
题目链接: Holiday's Accommodation Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 200000/200000 ...
使用merge-using语句初始化数据库
创建三张表Student.Course.Enrollment CREATE TABLE [dbo].[Student] ( [StudentID] INT IDENTITY (1, 1) NOT NU ...
linux下系统调用劫持ioctl
实验环境:linux 2.6.32 64位系统采用lkm(动态加载内核模块)方式劫持ioctl系统调用,系统调用过程如图所示(以open为例子) 实验代码:(头文件有不需要的,但是懒得改了,在系 ...
洛谷 P3708 koishi的数学题
找规律发现\( f[i]=f[i-1]+n-\sum_{i的因数和} \) 一A了深(sh)蓝(ui)题的我被找规律绿题卡死记得开long long #include<iostream> ...
ES6 我的总结学习
1 let 和 const let 的作用域与 const 命令相同:只在声明所在的块级作用域内有效.且不存在变量提升 . 1.1 let let 所声明的变量,可以改变. let a = 123 a ...

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

第六章 使用CSS美化图片