给网页添加图片

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. 1.1 Eclipse下载安装

    可直接上官网下载:http://www.eclipse.org/downloads/ 直接下载地址:http://www.eclipse.org/downloads/download.php?file ...

  2. 安装aptana(1)

    以前在myeclipse8.5上装了aptana,现在用myeclipse2014了,但是用原来的方法没有安装上,网上搜了下,发现都是老的方法,对新版的myeclipse已经不适用了,下面是转载的一篇 ...

  3. Java 语言的 XPath API

    如果要告诉别人买一加仑牛奶,您会怎么说?"请去买一加仑牛奶回来" 还是 "从前门出去,向左转,走三个街区向右转,再走半个街区向右转进入商店.走向四号通道,沿通道走五米向左 ...

  4. MVC学习笔记--IEnumerable的用法

    IEnumerable的用法 IEnumerable和IEnumerable<T>接口在.NET中是非常重要的接口,它允许开发人员定义foreach语句功能的实现 并支持非泛型方法的简单的 ...

  5. Intent Flag实际项目 -- 超时跳转登录界面并清理前面所有activity

    项目中涉及到登录超时跳转登录界面的逻辑,我以前的跳转flag为Intent.FLAG_ACTIVITY_CLEAR_TOP,但是点击返回按钮还是会回到上个界面.代码如下: ActivityUtils. ...

  6. hdu1013

    #include<stdio.h> #include<string.h> int main() { char num[1000]; int len,sum,i; while(s ...

  7. css3制作导航栏

    <!doctype html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  8. java 导出excel(复杂案例)

    import java.io.FileOutputStream;import java.io.IOException; import org.apache.poi.hssf.usermodel.HSS ...

  9. jquery获取li中的各项属性值attr

    发布新内容时的设计 默认显示一个按钮 如:发布按钮(放在h3字体里面)(鼠标上面时.显示发布到哪个模块下拉菜单发在li里面) $('#pup_model li , #pup_model h3').cl ...

  10. web.py 学习（二）Worker

    Rocket Server 启动一个线程监听客户端的连接,收到连接将连接放置到队列中.线程池中的Worker会以这个连接进行初始化.Rocket中Worker的基类是: class Worker(Th ...