揭秘CSS(第 1 版)
4.5 背景
阅读(

概述

CSS选择器

字体和文本

盒模型

概述

内边距

外边距

边框

背景

背景是创建更有趣味的网页的常用一种手法,无论是直接使用背景颜色,还是使用背景图像,都能给网页带来丰富的视觉效果。

在CSS1中,就提供了对背景的控制,并提供了 5 个background相关的属性,用来设置背景颜色、背景图像、背景图像的平铺方式、背景附着。

在CSS3中,提供了更丰富的背景效果,支持纯色背景、图像背景、渐变背景等,并对背景提供了更精细的控制,可以控制背景的尺寸、起始位置、显示范围等,同时还支持多重背景和渐变。

定义背景时,可以使用复合属性 background,也可以使用独立属性。复合属性的语法格式为:

background: <color> || <position> [/<size>]? || <repeat> || <attachment> || <origin> || <clip>

也就是说,background属性可以分解为color、position、size、repeat、attachment、origin、clip 这 7 个属性,这些属性的功能及所对应的CSS版本见表表 4‑4:

表 4-4 background属性的功能及对应的版本
属性功能描述版本
background-color设置背景的颜色1
background-image设置背景图像1
background-repeat设置背景图像的平铺方式1
background-position设置背景图像的位置1
background-attachment设置背景图像是随对象内容滚动,还是固定不动1
background-size设置背景图像的尺寸3
background-origin设置背景图像的起点位置3
background-clip设置背景的显示范围3

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验