CSS 背景图像 background-image属性

除了背景颜色，也可以使用背景图像来实现各种复杂、有趣的背景效果。CSS中，使用 background-image属性来定义背景图像的路径，取值为 none | url，默认值为 none。

url 可以是相对路径，也可以是绝对路径。使用相对路径时，url 是相对于 css 所在的文件，而不是要设置样式的HTML文件。如，下面代码表示，使用 css 文件所在目录下的 img 文件夹下的图像 bg.gif 作为背景图像：

div {
width: 200px;
height: 200px;
background-image: url(img/bg.gif);
}

默认情况下，背景图像会在水平方向和垂直方向重复，以填满整个容器。假如有一幅图案 bg.gif，其尺寸为 100px * 100px。如图 4‑25 所示：

图4-25 背景图案

由于容器 div的尺寸为 200px * 200px，如果把图案 bg.gif 作为容器 div 的背景，则背景会在水平方向和垂直方向各重复两次，显示效果如图 4‑26 所示：

图4-26 背景图像

关于作者

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

CSS 背景图像 background-image属性相关推荐

css背景图像属性_如何将CSS3转换应用于背景图像
css背景图像属性 CSS transformations are great, but they don't (yet?) apply to background images. This arti ...
CSS背景图像的简单响应
本文设有很多,最理想的解决方案,响应图像只是其中之一.我们建议您查看不同的方法,然后再选择一个特定的响应图像解决方案,包括这两个:如何避免重复下载响应图像中选择响应图像解决方案. 大家都在谈论的的sr ...
CSS背景（background）
CSS背景backgroud 背景颜色(color) 背景图片(image) 背景平铺(repeat) 背景位置(position)重点背景附着背景简写背景透明(CSS3) 背景总结理解背景 ...
css背景图background - 多背景定义
css背景图background - 多背景定义 1. 方法一 .bg{height:600px;background: url(../../static/images/slider/zplc.png ...
css 背景颜色 background属性
背景颜色 background 含义: 背景是指在盒子结构中,衬托在边框线范围以内的背景颜色或背景图. 可以设置背景颜色,或背景图,或同时设置.其中背景图有多项参数可设置. 主要的背景属性设置有: 设 ...
html自动图片尺寸,关于html：CSS背景图像适合宽度，高度应按比例自动缩放
我有 body { background: url(images/background.svg); } 期望的效果是该背景图像的宽度等于页面的宽度,高度变化以保持比例. 例如如果原始图像恰好是100 ...
七、CSS背景（background简写）
CSS 背景属性用于定义 HTML 元素的背景,通过背景属性我们可以定义元素的背景颜色.背景图片.背景图片的平铺方式和显示位置等. 1.background-color background-colo ...
html5 固定背景,css 背景固定样式background-attachment属性基础
一.background-attachment属性在CSS中,使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动. 语法: background-at ...
CSS背景（background）篇
1. background概述 CSS 可以添加背景颜色和背景图片,以及来进行图片设置. 属性描述 background-color: 背景颜色 background-image: 背景图片地址 b ...

CSS 背景图像 background-image属性

CSS 背景图像 background-image属性相关推荐

最新文章

热门文章