给网页添加图片

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. Drupal设置首页默认内容

    接触Drupal时间不长,记录一下学习点滴~ Drupal首页的内容,默认是取node表的内容展示的,如果想让首页展示自己创表的内容怎么办呢?以Drupal7为例 在这个admin/config/sy ...

  2. WPF之DatePicker使其只能选择日期，不能输入日期

    <DatePicker.Resources>  <Style TargetType="DatePickerTextBox">           <S ...

  3. Chloe and pleasant prizes

    Chloe and pleasant prizes time limit per test 2 seconds memory limit per test 256 megabytes input st ...

  4. JavaScript DOM编程艺术-学习笔记（第二章）

    1.好习惯从末尾加分号:开始 2.js区分大小写 3.程序界万能的命名法则:①不以,数字开头的数字.字母.下划线.美元符号 ②提倡以下划线命名法来命名变量,以驼峰命名法来命名函数.但是到了公司往往会身 ...

  5. Android KeyCode

    KEYCODE_UNKNOWN=0; KEYCODE_SOFT_LEFT=1; KEYCODE_SOFT_RIGHT=2; KEYCODE_HOME=3; KEYCODE_BACK=4; KEYCOD ...

  6. Python基础篇-day11 - 协程

    本节主要内容: 1.Gevent协程2.Select\Poll\Epoll异步IO与事件驱动3.RabbitMQ队列 1.Gevent协程 1.1协程的好处 无需线程上下文切换的开销无需原子操作锁定及 ...

  7. 五、oracle基本建表语句

    --创建用户create user han identified by han default tablespaceusers Temporary TABLESPACE Temp;grant conn ...

  8. 第七十五节，CSS表格与列表

    CSS表格与列表 学习要点: 1.表格样式 2.列表样式 3.其他功能 一．表格样式 表格有五种独有样式,样式表如下:             属性               值           ...

  9. css样式重置（初始化）收集

    淘宝的样式初始化: body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fields ...

  10. 《JS权威指南学习总结--6.6属性getter和setter》

    内容要点: 一.对象属性     对象属性是由名字.值和一组特性构成的.在ES5中,属性值可以用一个或两个方法替代,这两个方法就是getter和setter.由getter和setter定义的属性称做 ...