学习要点：

1.设置背景

主讲教师：李炎恢

本章主要探讨 HTML5 中 CSS 边框和背景，通过边框和背景的样式设置，给元素增加更丰富的外观。

一．设置背景

盒模型的尺寸可以通过两种方式实现可见性，一种就是之前的边框，还有一种就是背景。 CSS 背景设置的样式表如下：

属性

说明

CSS 版本

background-color

背景的颜色

1

background-image

背景的图片

1/3

background-repeat

背景图片的样式

1/3

background-size

背景图像的尺寸

3

background-position

背景图像的位置

1

background-attachment

背景图片的滚动

1/3

background-clip

背景图片的裁剪

3

background-origin

背景图片起始点

3

background

背景图片简写方式

1

1.background-color

值

说明

CSS 版本

颜色

设置背景颜色为指定色

1

transparent

设置背景颜色为透明色

1

 
div {

    background-color: silver;

}

解释：设置元素的背景颜色。属性值是颜色值。

div b {

    background-color: transparent;

}

解释：默认值为 transparent，为透明的意思。这样<div>内部的元素就会继承<div>的背景色。一般来说这个属性使用频率很低，原因是不需要改变色彩时就默认，需要改变色彩时又是颜色值。

body {

    background-color: silver;

}

解释：在<body>元素下可以设置整个页面的背景色。

2.background-image

值

说明

CSS 版本

none

取消背景图片的设置

1

url

通过 URL 设置背景图片

1

 
body {

    background-image: url(loading.gif);

}

解释：url 里面是图片的路径，设置整个页面以这个图片为背景，如果图片不足以覆盖，则复制扩展。

div {

    background-image: none;

}

解释：如果多个 div 批量设置了背景，而其中某一个不需要背景，可以单独设置 none 值取消背景。

在 CSS3 中，背景图片还设置了比如线性、放射性等渐变方式。但由于支持度的问题，比如 IE9 尚未支持。我们把这些的新特性放到独立的课程中讲解。

3.background-repeat

值

说明

CSS 版本

repeat-x

水平方向平铺图像

1

repeat-y

垂直方向平铺图像

1

repeat

水平和垂直方向同时平铺图像

1

no-repeat

禁止平铺图像

1

 
body {

    background-image: url(loading.gif);

    background-repeat: no-repeat;

}

解释：让背景图片只显示一个，不平铺。CSS3 还提供了两个值，由于支持度不佳，这里忽略。

4.background-position

值

说明

CSS 版本

top

将背景图片定位到元素顶部

1

left

将背景图片定位到元素左部

1

right

将背景图片定位到元素右部

1

bottom

将背景图片定位到元素底部

1

center

将背景图片定位到元素中部

1

长度值

使用长度值偏移图片的位置

1

百分数

使用百分数偏移图片的位置

1

 
body {

    background-image: url(loading.gif);

    background-repeat: no-repeat;

    background-position: top;

}

解释：将背景图片置于页面上方，如果想置于左上方则值为：top left。

body {

    background-image: url(loading.gif);

    background-repeat: no-repeat;

    background-position: 20px 20px;

}

解释：使用长度值或百分数，第一值表示左边，第二个值表示上边。

5.background-size

值

说明

CSS 版本

auto

默认值，图像以本尺寸显示

3

cover

等比例缩放图像，使图像至少覆盖容器，但有可能超出容器

3

contain

等比例缩放图像，使其宽度、高度中较大者与容器横向或纵向重合

3

长度值

CSS 长度值，比如 px、em

3

百分数

比如：100%

3

 
body {

    background-image: url(loading.gif);

    background-size: cover;

}

解释：使用 cover 相当于 100%，全屏铺面一张大图，这个值非常实用。在等比例放大缩小的过程中，可能会有背景超出，当然，这点无伤大雅。

div {

    background-image: url(loading.gif);

    background-size: contain;

}

解释：使用 contain 表示，尽可能让图片完整的显示在元素内。

body {

    background-image: url(loading.gif);

    background-size: 240px 240px;

}

解释：长度值的用法，分别表示长和高。

6.background-attachment

值

说明

CSS 版本

scroll

默认值，背景固定在元素上，不会随着内容一起滚动

1

fixed

背景固定在视窗上，内容滚动时背景不动

1

 
body {

    background-image: url(loading.gif);

    background-attachment: fixed;

}

解释：fixed 属性会导致背景产生水印效果，拖动滚动条而背景不动。

7.background-origin

值

说明

CSS 版本

border-box

在元素盒子内部绘制背景

3

padding-box

在内边距盒子内部绘制背景

3

content-box

在内容盒子内部绘制背景

3

 
div {

    width: 400px;

    height: 300px;

    border: 10px dashed red;

    padding: 50px;

    background-image: url(img.png);

    background-repeat: no-repeat;

    background-origin: content-box;

}

解释：设置背景起始位置。

8.background-clip

值

说明

CSS 版本

border-box

在元素盒子内部裁剪背景

3

padding-box

在内边距盒子内部裁剪背景

3

content-box

在内容黑子内部裁剪背景

3

 
div {

    width: 400px;

    height: 300px;

    border: 10px dashed red;

    padding: 50px;

    background-image: url(img.png);

    background-repeat: no-repeat;

    background-origin: border-box;

    background-clip: padding-box;

}

解释：在内边距盒子内部裁剪背景。

9.background 

div {

    width: 400px;

    height: 300px;

    border: 10px dashed red;

    padding: 50px;

    background: silver url(img.png) no-repeat scroll left top/100% border-box content-box;

}

解释：完整的简写顺序如下：

[background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position]/[background-size]
[background-origin]
[background-clip]

第 17 章 CSS 边框与背景[下]的更多相关文章

  1. 第 17 章 CSS 边框与背景[上]

    学习要点: 1.声明边框 2.边框样式 3.圆角边框 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．声明边框 边框的声明有 ...

  2. 第七十四节，css边框与背景

    css边框与背景 学习要点: 1.声明边框 2.边框样式 3.圆角边框  本章主要探讨HTML5中CSS边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 声明边框 边框的声明有三个属性设 ...

  3. 复习-css边框和背景属性

    css边框和背景属性 border:所有边框属性 border-width:四条边框的宽度 border-style:设置边框样式,主要有dotted.solid.double border-colo ...

  4. 第2章 css边框属性

    圆角效果 border-radius border-radius是向元素添加圆角边框. 使用方法: border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border- ...

  5. css中的背景、边框、补丁相关属性

    css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

  6. CSS属性定义 文本修饰 边框效果 背景修饰

    一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道 强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度 值为0-1)rgba(123,123,123,0) ...

  7. 第四章 电商云化，4.1 17.5W秒级交易峰值下的混合云弹性架构之路(作者：唐三 乐竹 锐晟 潇谦)

    4.1 17.5W秒级交易峰值下的混合云弹性架构之路 前言 每年的双11都是一个全球狂欢的节日,随着每年交易逐年创造奇迹的背后,按照传统的方式,我们的成本也在逐年上升.双11当天的秒级交易峰值平时的近 ...

  8. css 使用background背景实现border边框效果

    css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...

  9. 【WEB基础】HTML & CSS 基础入门（5）边框与背景

    前面(HTML图片) 漂亮的网页肯定少不了边框与背景的修饰,本篇笔记就是说明如何为网页上的元素设置边框或者背景(背景颜色和背景图片). 之前,先了解一下HTML中的图片元素,因为图片标签的使用非常简单 ...

随机推荐

  1. Oracle VM VirtualBox配置文件

    Linux 虚拟机配置文件分为两处. windows下: 1.用户名/.VirtualBox/ 这里面有2个配置文件: VirtualBox.xml 和 VirtualBox.xml-prev. 后面 ...

  2. Atitti 文本分类  以及 垃圾邮件 判断原理 以及贝叶斯算法的应用解决方案

    Atitti 文本分类  以及 垃圾邮件 判断原理 以及贝叶斯算法的应用解决方案 1.1. 七.什么是贝叶斯过滤器?1 1.2. 八.建立历史资料库2 1.3. 十.联合概率的计算3 1.4. 十一. ...

  3. MyBatis 环境搭建 （一）

    一.MyBatis简介 MyBatis 是支持普通 SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索.MyBatis 使用简 ...

  4. XML学习笔记4——XSD简单数据类型

    XSD提供了数据类型,并且支持自定义数据类型,但这一切都是建立在XSD内置数据类型和一套扩展内置数据类型的规则基础之上的,在这一篇笔记中,就来看看XSD中的数据类型. 1.XSD数据类型图 先看一下数 ...

  5. JSP网站开发基础总结《四》

    经过前几篇的摸爬滚打,下面我们就开始我们真正的数据库操作了,本篇重点在于如何在网站端编写数据库操作语句,内容不多,就是我们常见的增删改查. 0.数据库对象创建: 在JAVASE基础知识总结时,就为大家 ...

  6. javase基础复习攻略《七》

    容器是什么?通俗的讲容器指可以装其它东西的器皿,前面我们提到的数组便是容器的一种,容器的概念在JAVA中便可以理解为用来存储其它对象的器皿.本篇就让我们一起来认识一下JAVA为我们提供的容器类. 1. ...

  7. eclipes创建一个web项目web.xml不能自动更新的原因（web.xml和@WebServlet的作用）

    在eclipse中创建一个Web项目的时候,虽然有web.xml生成,但是再添加Servlet类文件的时候总是看不见web.xml的更新,所以异常的郁闷!上网查了查,原来我们在创建Web项目的时候,会 ...

  8. ASP.NET MVC 4中如何为不同的浏览器自适应布局和视图

    在ASP.NET MVC 4中,可以很简单地实现针对不同的浏览器自适应布局和视图.这个得归功于MVC中的"约定甚于配置"的设计理念. 默认的自适应 MVC 4自动地为移动设备浏览器 ...

  9. 开发笔记：基于EntityFramework.Extended用EF实现指定字段的更新

    今天在将一个项目中使用存储过程的遗留代码迁移至新的架构时,遇到了一个问题——如何用EF实现数据库中指定字段的更新(根据UserId更新Users表中的FaceUrl与AvatarUrl字段)? 原先调 ...

  10. 数据可视化(1)--Chart.js

    Chart.js是一个HTML5图表库,使用canvas元素来展示各式各样的客户端图表,支持折线图.柱形图.雷达图.饼图.环形图等.在每种图表中,还包含了大量的自定义选项,包括动画展示形式. Char ...