CSS3秘笈：第八章
给网页添加图片
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秘笈：第八章的更多相关文章
- CSS3秘笈复习：第八章
一.背景的所有属性: 属性 作用 可选项 1.background-image 定义一张图片 url(...) 2.background-repeat 控制重复 no-repeat | repeat- ...
- CSS3秘笈第三版涵盖HTML5学习笔记13~17章
第13章,构建基于浮动的布局 使用的是float(浮动)属性 注:float:none值将取消所有浮动,通常只用来取消元素中已经应用的浮动. 切记:不需要给正文的div设计宽度,即使设计成固定宽度也不 ...
- CSS3秘笈第三版涵盖HTML5学习笔记9~12章
第9章,装饰网站导航 限制访问,处于隐私方面考虑,浏览器已经开始限制可以对伪类:visited应用哪些CSS属性了.其中包括对已访问过的链接定义color.background-color.borde ...
- CSS3秘笈第三版涵盖HTML5学习笔记6~8章
第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...
- CSS3秘笈第三版涵盖HTML5学习笔记1~5章
第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...
- CSS3秘笈：第十章
CSS的transform.transition和animation属性 1.transform(倾斜):利用transform属性可以使导航栏稍微倾斜,或者使图片在访问者的鼠标经过它时放大两倍,甚至 ...
- 《CSS3秘笈》备忘录
第一部分 1. 类名称区分大小写:.special和.SPECIAL不一样 2. :focus 是通过单击或跳格集中在某个地方 3. ::selection 没有单冒号,被选中的文本[ 但是在I ...
- CSS3秘笈复习：十三章&十四章&十五章&十六章&十七章
第十三章 1.在使用浮动时,源代码的顺序非常重要.浮动元素的HTML必须处在要包围它的元素的HTML之前. 2.清楚浮动: (1).在外围div的底部添加一个清除元素:clear属性可以防止元素包围浮 ...
- CSS3秘笈复习：第十一章
1.text-align与vertical-align: text-align控制水平方向的定位,关键字是left.right.center和justify. vertical-align控制垂直方向 ...
随机推荐
- sql server 2008 R2 压缩备份数据库
今天需要把一个省外项目的数据库从服务器上备份.拷贝到本机(跨地域传输数据库备份文件). 连上VPN,通过远程桌面连接,连接上服务器,发现数据库文件已经有20G以上大小了. 文件太大,公司网络也不稳定, ...
- Scrapy框架使用—quotesbot 项目（学习记录一）
一.Scrapy框架的安装及相关理论知识的学习可以参考:http://www.yiibai.com/scrapy/scrapy_environment.html 二.重点记录我学习使用scrapy框架 ...
- swift 图像的压缩上传
func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [Str ...
- Redis集合相关命令
1.无序集合集合的特性:①确定性②互异性③无序性redis的set是string类型的无序集合set元素最大可以包含(2^32-1)个元素 sadd key value1....valueN 将将元素 ...
- count 数字计数（bzoj 1833）
Description 给定两个正整数a和b,求在[a,b]中的所有整数中,每个数码(digit)各出现了多少次. Input 输入文件中仅包含一行两个整数a.b,含义如上所述. Output 输出文 ...
- awk学习笔记一：基础(转)
awk内置变量 ARGC 命令行参数个数ARGV 命令行参数排列ENVIRON 支持队列中系统环境变量的使用FILENAME awk浏览的文件名FNR 浏览文件的记录数FS 设置输入域分隔符,等价于命 ...
- html5权威指南：嵌入另一张HTML文档、通过插件嵌入内容、嵌入数字表现形式
嵌入另一张HTML文档.通过插件嵌入内容.嵌入数字表现形式:http://www.cnblogs.com/yc-755909659/p/5928125.html
- mobiscroll 插件札记（一）
mobiscroll 插件笔记(一) 文章参照 http://www.cnblogs.com/headwolf/archive/2013/12/23/3487207.html 最近切一个移动页面,需 ...
- Fedora设置中文
安装Fedora14时,界面语言是英语,结果忘了修改酿成大祸,hou后面qt怎么改 也显示不出来中文!哎,真是功亏一篑啊差点. 只好手动安装简体中文语言包: 1.打开终端,执行yum install ...
- MySQL聚簇索引
聚簇索引并不是一种单独的索引类型,而是一种数据存储方式.具体的细节依赖于其实现方式,但innoddb 的聚簇索引实际上在同一个结构中保存了B-Tree索引和数据行. 当表有聚簇索引时,它的数据实际上存 ...