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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

第六章使用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>]+)

正文

第六章使用CSS美化图片

GIF图像

JPEG图像

PNG图像

6.2 设置图像样式

6.2.1 定义图像大小

6.2.2 定义图像边框

1、边框样式

2、边框颜色和宽度

6.2.3 定义图像不透明度

6.2.4 定义圆角图像

6.2.5 定义阴影图像

6.2.6 图文混排

6.3 设置背景图像

6.3.1 定义背景图像

6.3.2 定义显示方式

6.3.3 定义显示位置

6.3.4 定义固定背景

6.3.5 定义坐标

6.3.6 定义裁剪区域

6.3.7 定义大小

6.3.8 定义循环方式

6.3.9 定义多背景图

6.4 定义渐变背景

6.4.1 设计Webkit渐变

6.4.2 设计Gecko渐变

6.4.3 设计W3C渐变

相关阅读

项目管理师证样本，项目管理师证样本图片

js加载图片的宽度，js加载图片的宽度是多少

js如何将网页转成图片格式，javascript做网页

jquery图片url拆分，jqueryeach

html5点击小图出大图，h5 图片点击特效

html5怎么控制图像大小，html图片位置调节

python爬虫下载网页图片，Python如何爬虫网页数据

html5照片怎么插入，html5上传图片代码

目录[+]

第六章 使用CSS美化图片

GIF图像

JPEG图像

PNG图像

6.2 设置图像样式

6.2.1 定义图像大小

6.2.2 定义图像边框

1、边框样式

2、 边框颜色和宽度

6.2.3 定义图像不透明度

6.2.4 定义圆角图像

6.2.5 定义阴影图像

6.2.6 图文混排

6.3 设置背景图像

6.3.1 定义背景图像

6.3.2 定义显示方式

6.3.3 定义显示位置

6.3.4 定义固定背景

6.3.5 定义坐标

6.3.6 定义裁剪区域

6.3.7 定义大小

6.3.8 定义循环方式

6.3.9 定义多背景图

6.4 定义渐变背景

6.4.1 设计Webkit渐变

6.4.2 设计Gecko渐变

6.4.3 设计W3C渐变

相关阅读

项目管理师证样本，项目管理师证样本图片

js加载图片的宽度，js加载图片的宽度是多少

js如何将网页转成图片格式，javascript做网页

jquery图片url拆分，jqueryeach

html5点击小图出大图，h5 图片点击特效

html5怎么控制图像大小，html图片位置调节

python爬虫下载网页图片，Python如何爬虫网页数据

html5照片怎么插入，html5上传图片代码

目录[+]

第六章使用CSS美化图片

2、边框颜色和宽度