css背景
先来是背景颜色。
p
{background-color:gray;//颜色是灰色
padding:30px//是内边距随着数值的大小框也会变大变小。
}
注意,background-color不能继承,其默认值是transparent。transparent是“透明”。如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。
background-image:背景图像
background-color可以为元素设置背景色,还可以用background-image属性为元素设置背景图像,其默认值是none,表示元素背景上没有放置任何图像。如果需要设置一个背景图像,必须为这个属性设置一个URL值。
body{background-image:url(img/a.jpg);}
注意:她也是不能继承的,而且有图会盖住背景颜色,图片优先级高于背景颜色优先级。
background-position:背景定位
一开始背景图片的位置的在元素的左上角,但可以利用background-position属性改变图像在背景中的位置。
它的值有,topleft,topcenter,topright,centercenter,bottomleft,bottomright,bottomcenter.//top是上面bottom下面注意若只有一个关键字下一个字默认center
background-attachment:背景关联
scroll:默认值,背景图像会随着页面其余部分的滚动而移动。
fixed:固定显示,相对于body固定。一般只用于body的背景设置。
写个例子格式。
<!DOCTYPEhtml>
2<htmllang="en">
3<head>
4<metacharset="UTF-8">
5<title>CSS背景</title>
6<styletype="text/css">
7body{
8background-image:url(img/a.jpg);//背景图片
9background-repeat:no-repeat;//背景不平铺
10background-attachment:fixed;//定义背景图片随滚动轴的移动方式
11}
12</style>
13</head>
14<body>
15<p>图像不会随页面的其余部分滚动。</p>
16<p>图像不会随页面的其余部分滚动。</p>
17...
18<p>图像不会随页面的其余部分滚动。</p>
19</body>
20</html>
这样转动转轴文字滚动,背景不动。