给网页添加图片

1、 常用来处理图片的CSS属性：

（1）     border（边框）：给图片添加边框。

（2）     padding（填充）：边框和图片之间填充空间。

（3）     float（浮动）：浮动图片是指将图片移到左侧或者右侧。

（4）     margin（边距）：图片和其他网页元素之间添加空间。

2、 添加图片背景：

background-image属性可以给元素添加背景。例如：给网页添加一个背景可以给<body>创建如下样式：

body{

background-image：url（images/bg.gif）；

}

这个属性用了一个值：关键字url 括号里的内容是图形的文件属性。

3、 控制重复：

background-repeat属性指定图片要如何平铺。

（1）     repeat是默认设置，将图片从左到右从上到下平铺直到整个空间都被图片填满为止。

（2）     no-repeat只显示图片一次，不会平铺或重复。

（3）     repeat-x沿着x轴水平地重复某一张图片。

（4）     repeat-y沿着y轴垂直地重复某一张图片。

4.、定位图片背景：

background-position属性可以通过3种不同的方法来设定图片在水平方向和垂直方向的起点，它们分别是keyword、精确值和percentage。

（1）     关键字：关键字的选项有两组，一组用来控制水平方向的3种定位：left、center、right。另一组用来控制垂直方向的3种定位：top、center、bottom。

（2）     精确值：可以用px或em指来定位背景图片。这里要使用两个值，一个值指明图片左侧和容器左侧之间的距离，另一个值指明图片顶边和样式顶边之间的距离。换句话说，第一个值控制水平方向的定位，第二个值控制垂直方向上的定位。

（3）     Percentage：也可以用百分比值定位图片背景。

5、如何固定图片：background-attachment属性可以固定图片一直保持在视图区。它有两个选项：scroll和fixed。Scroll：背景会随着文本和其他网页内容一起滚动，fixed则是把图片保持在背景中的某个固定位置上。

6、定位背景图片的background-origin和background-clip属性：

可以用background-origin属性调整图片的起点，它的值有3个选项：

（1）     border-box：将图片放在border区域的左上角。

（2）     padding-box：将图片放在padding区域的左上角。

（3）     content-box：将图片放在内容区域的右上角。

注意：这两个属性在IE8及其更早的版本中均不起作用，因此需要谨慎使用。

background-clip属性可以限制背景图片的显示区域。一般来说，背景图片会铺满某个元素的整个区域，包括border和padding区域的背面。但是，也可以利用一下任意一个值来定义图片的显示位置：

（1）     border-box让图片显示在内容区域的背后。

（2）     padding-box是所有背景图片都只能显示到元素的padding区域和内容区域。

（3）     content-box限制背景图片只显示在内容区域。

7、缩放背景图片：

CSS3增加了一个background-size属性，它可以控制图片背景的尺寸。可以使用精确值，也可以使用关键字。关键字contain会迫使图片按照原有的长宽比进行调整，关键字cover会迫使图片的宽度或者高度进行调整，以便适应元素的宽度或者高度。

8、使用渐变色背景：

渐变有以下几种类型：

（1）线性渐变：是最基本的渐变类型，它将一条直线从元素的一边移到另一边，并且从一种颜色逐渐转变成另一种颜色。例如，创建一种从元素左边以黑色开始渐变到元素的最右边，并以白色结束，可以像下面这样写代码：

background-iamge：line-gradient（left，black，white）；

第一个值表示元素的起始位置，第二个值是起始颜色，第三个值是结束颜色。起始位置可以用关键字left、right、top、bottom也可以用程度值：0-360之间的数字加上deg组成。如0deg表示从左边开始移到右边，45deg表示呈45°角向上移到右上角。

渐变颜色可以多种，例如从黑到白再到黑可以这么写：

background-image：linear-gardient（left，black，white，black）

可以指定颜色的位置：

Background-image：linear-gradient（left，#900，#FC0 10%，#FC0 90%，#900）；10%表示将#FC0这个颜色到达元素宽度10%位置处。

为了让渐变再不同浏览器上都能生效，必须添加供应商前缀。

（2）径向渐变：以圆形或椭圆形向外辐射。只需要提供一种起始色和终止色。例如：

background-image：radial-gradient(red, blue)；

它创建了一个适合元素高度和宽度的椭圆形，渐变的中心（起始的红色）处于元素的中心。

如果在颜色值之前添加关键字circle，可以创建出圆形渐变。例如：

background-image（circle ，red，blue）；

径向渐变的定位值要放在颜色值和形状关键字之前。

为了指明渐变的尺寸可以使用以下4个关键字：

（1）     closest-side告诉浏览器渐变要从中心点一直延伸到离中心点最近的那一边。

（2）     closest-corner用于测量渐变的宽度，指的是从它中心点到最近元素角的距离。

（3）     farthest-side用于测量圆形的半径，即从它的中间点到元素最远的那一边的距离。

（4）     farthest-corner用于测量圆形的半径，即从它的中间点到元素最远角的距离。

9、重复径向渐变：background-image：repeating-radial-gradient（circle，red 20px，orange 30px，yellow 40px，red 50px）。

CSS3秘笈：第八章的更多相关文章

  1. CSS3秘笈复习：第八章

    一.背景的所有属性: 属性 作用 可选项 1.background-image 定义一张图片 url(...) 2.background-repeat 控制重复 no-repeat | repeat- ...

  2. CSS3秘笈第三版涵盖HTML5学习笔记13~17章

    第13章,构建基于浮动的布局 使用的是float(浮动)属性 注:float:none值将取消所有浮动,通常只用来取消元素中已经应用的浮动. 切记:不需要给正文的div设计宽度,即使设计成固定宽度也不 ...

  3. CSS3秘笈第三版涵盖HTML5学习笔记9~12章

    第9章,装饰网站导航 限制访问,处于隐私方面考虑,浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了.其中包括对已访问过的链接定义color.background-color.borde ...

  4. CSS3秘笈第三版涵盖HTML5学习笔记6~8章

    第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...

  5. CSS3秘笈第三版涵盖HTML5学习笔记1~5章

    第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...

  6. CSS3秘笈：第十章

    CSS的transform.transition和animation属性 1.transform(倾斜):利用transform属性可以使导航栏稍微倾斜,或者使图片在访问者的鼠标经过它时放大两倍,甚至 ...

  7. 《CSS3秘笈》备忘录

    第一部分 1.  类名称区分大小写:.special和.SPECIAL不一样 2.  :focus 是通过单击或跳格集中在某个地方 3.  ::selection 没有单冒号,被选中的文本[ 但是在I ...

  8. CSS3秘笈复习：十三章&十四章&十五章&十六章&十七章

    第十三章 1.在使用浮动时,源代码的顺序非常重要.浮动元素的HTML必须处在要包围它的元素的HTML之前. 2.清楚浮动: (1).在外围div的底部添加一个清除元素:clear属性可以防止元素包围浮 ...

  9. CSS3秘笈复习：第十一章

    1.text-align与vertical-align: text-align控制水平方向的定位,关键字是left.right.center和justify. vertical-align控制垂直方向 ...

随机推荐

  1. 找工作---操作系统常考知识点总结【PB】

    1.进程是并发过程中程序的执行过程 2.进程的特征:结构特征.动态性.并发性.独立性.异步性 3.临界区指在每个进程中访问临界资源的那段代码 4,现在操作系统中申请资源的基本单位是进程,在CPU得到执 ...

  2. 【.NET】XML文件的创建，修改，删除

    类名:XML /// 1.创建XML文档 /// 2.在根节点下增加子元素 /// 3.在元素下增加子元素 /// 4.获取类型为制定值的一组节点 /// 5.抓取网页上的xml文档赋值给XmlDoc ...

  3. j2ee tomcat 部署学习

    J2EE基础实例demo http://www.cnblogs.com/javabin/p/3809954.html J2EE 数据库JDBC(Java Data Base Connectivity, ...

  4. C# 深入了解泛型

    本文是根据网上&书本总结来的. 1. 介绍 泛型程序设计是程序设计语言的一种风格或范式. 泛型允许程序员在强类型程序设计语言中编写代码时使用一些以后才指定的类型,在实例化时(instantia ...

  5. CodeForces 702E Analysis of Pathes in Functional Graph

    倍增预处理. 先看一下这张图的结构,因为出度都是$1$,所以路径是唯一的,又因为每个点都有出度,所以必然有环,也就是一直可以走下去. 接下来我们需要记录一些值便于询问: 设$t[i][j]$表示从$i ...

  6. ACdream 1028 Path

    先思考一下序列上应该怎么做. 如果某段和为x,并且x为偶数,那么比x小的偶数,一定是这段的子段. 如果某段和为x,并且x为奇数,那么比x小的奇数,一定是这段的子段. 因此....只要寻找最大的连续的和 ...

  7. 遍历（二）javascript的Foreach语法

    原文:http://www.cnblogs.com/Fskjb/archive/2011/03/26/1996165.html 首先,虽然叫foreach语法但关键字还是用for哦,这个语法只是对平时 ...

  8. QQ互联功能

    QQ作为现在使用人数最多的几个聊天软件之一,倘若能够方便的进行沟通(在大家的机器上都安装了QQ客户端或者浏览器的前提下),在商家推广的时候也许会带来不小的利益. http://wp.qq.com/in ...

  9. 5、Struts2自定义拦截器

    一.拦截器相关知识 1.Struts2框架剖析 Holly版本生活案例: 影视公司(拍电影)    ActionMapper 传媒公司(包装明星) ActionMapping 明星           ...

  10. 读取memo中某行内容

    方法1 可用以下代码读取Memo中指定行的内容: var   aLine:String; begin   aLine:=Memo1.Lines[2]; end; 在使用中,读取的行在Memo中需要保证 ...