CSS background 属性是用来设置元素的背景,它可以用来设置背景颜色、图片、渐变以及其他背景属性。它是一个复合属性,可以使用多个值来定义不同的背景属性。
background 属性有很多不同的值,但是最常用的是 background-color 和 background-image 。background-color 用于设置元素的背景颜色;background-image 用于设置元素的背景图片。
background: #FF0000 url(bg.jpg) no-repeat center center;
上面这行代码将会将元素的背景设为 #FF0000 的颜色(即红色);并且将 bg.jpg 这张图片作为背景图片;no-repeat 表明不重复显示这张图片;center center 表明将这张图片居中显示在元素中。
此外,CSS background 还有一些其他常用的属性:background-size 用于调整背景图片的大小;background-position 用于定位背景图片在元素中的位置;background-repeat 用于重复显示背景图片。
background: #FF0000 url(bg.jpg) no-repeat center center / 100px auto;
上面这行代码将会将 bg.jpg 这张图片作为背景图片并且宽度为 100px (即 100 像素)、高度根据原始尺寸进行调整。
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
默认值: | scroll |
---|---|
继承: | no |
版本: | CSS1 |
JavaScript 语法: | object object.style.backgroundAttachment="fixed" |
值 | 说明 |
---|---|
scroll | 背景图片随页面的其余部分滚动。这是默认 |
fixed | 背景图像是固定的 |
inherit | 指定background-attachment的设置应该从父元素继承 |
local | 背景图片随滚动元素滚动 |
如何指定一个固定的背景图像:
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
属性 | |||||
---|---|---|---|---|---|
background-attachment | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS 教程: CSS Background
CSS3 background-origin 属性定义和用法background-Origin属性指定background-position属性应该是相对位置。注意如果背景图像bac...
CSS border-top 属性实例设置上边框的样式:p {border-style:solid;border-top:thick double #ff0000;}属性定义及使用说明border...
CSS3 border-top-right-radius 属性实例为div元素的右上角添加一个圆角边框:div{border:2px solid;border-top-right-radius:2em...
CSS counter-increment 属性实例对部分和子部分进行编号(比如 "Section 1"、"1.1"、"1.2")的方法:body{counter-reset:section...
CSS flex-flow 属性 CSS 参考手册实例让弹性盒的元素以相反的顺序显示,且在必要的时候进行拆行:display:flex;flex-flow:row-re...