1.CSS背景
CSS背景属性用于定义HTML元素的背景。
CSS属性定义背景效果:
· background-color：设置元素的背景颜色。
· background-image：把图像设置为背景。
· background-repeat：设置背景图像是否及如何重复。
· background-attachment：背景图像是否固定或者随着页面的其余部分滚动。
· background-position：设置背景图像的起始位置。
· background：简写属性，作用是将背景属性设置在一个声明中。
值 |
描述 |
color |
指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。 |
transparent |
指定背景颜色应该是透明的。这是默认 |
inherit |
指定背景颜色，应该从父元素继承 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style> body {background-color: #00FFFF;} </style> </head> <body> <h1>我的网页背景被渲染了！！！</h1> <p>Hello World！！！</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style> body {background-color: #00FFFF;} h1 {background-color: #FF1493;} p {background-color: #7FFF00;} div {background-color: #A52A2A;} </style> </head> <body> <h1>CSS background-color 实例：</h1> <div> 这个段落插入在div元素中 <p>我们为此段落设置了单独的背景颜色</p> 我们在div元素区块中设置了另一种背景颜色 </div> </body> </html>
值 |
说明 |
url('URL') |
图像的URL |
none |
无图像背景会显示。这是默认 |
创建一个线性渐变的 "图像"(从上到下) |
|
用径向渐变创建 "图像"。 (center to edges) |
|
创建重复的线性渐变 "图像"。 |
|
创建重复的径向渐变 "图像" |
|
inherit |
指定背景图像应该从父元素继承 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style> body { background-color: #DEB887; background-image: url(images/tx.jpg); background-repeat: repeat-x; } </style> </head> <body> <h1>Hello World!!!</h1> <p>可以看到我们为网页设置的背景颜色和背景图像</p> </body> </html>
1.3 background-repeat属性
值 |
说明 |
repeat |
背景图像将向垂直和水平方向重复。这是默认 |
repeat-x |
只有水平位置会重复背景图像 |
repeat-y |
只有垂直位置会重复背景图像 |
no-repeat |
background-image不会重复 |
inherit |
指定background-repea属性设置应该从父元素继承 |
1.4 background-position属性
值 |
描述 |
left top |
如果仅指定一个关键字，其他值将会是"center" |
x% y% |
第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。。默认值为：0％0％ |
xpos ypos |
第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions |
inherit |
指定background-position属性设置应该从父元素继承 |
实例一：
注释部分使用了背景中的简写属性。
当使用简写属性时，属性值的顺序为：:
· background-color
· background-image
· background-repeat
· background-attachment
· background-position
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style> body { background-color: #DEB887; background-image: url(images/tx.jpg); background-repeat: no-repeat; background-position: center; /*background: #DEB887 url(images/tx.jpg) no-repeat center;*/ } </style> </head> <body> <h1>Hello World!!!</h1> <p>背景图片只显示一张，不再重复</p> <p>同时背景图片与文本内容分开，居中显示</p> </body> </html>
值 |
描述 |
scroll |
背景图片随着页面的滚动而滚动，这是默认的。 |
fixed |
背景图片不会随着页面的滚动而滚动。 |
local |
背景图片会随着元素内容的滚动而滚动。 |
initial |
设置该属性的默认值。阅读关于 initial 内容 |
inherit |
指定 background-attachment 的设置应该从父元素继承。 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style> body { background-color: #DEB887; background-image: url(images/tx.jpg); background-repeat: no-repeat; background-position: top; background-attachment: fixed; } </style> </head> <body> <h1>Hello World!!!</h1> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> <p>背景图片是固定的。尝试向下滚动页面。</p> </body> </html>
