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 属性改变图像在背景中的位置。
它的值有，top left ,top center,top right ,center center,bottom left,bottom right,bottom center. //top 是上面 bottom 下面注意若只有一个关键字下一个字默认center

background-attachment：背景关联
scroll：默认值，背景图像会随着页面其余部分的滚动而移动。
fixed：固定显示，相对于body固定。一般只用于body的背景设置。
写个例子格式。
<!DOCTYPE html>
2 <html lang="en">
3 <head>
4     <meta charset="UTF-8">
5     <title>CSS背景</title>
6     <style type="text/css">
7         body {
8             background-image: url(img/a.jpg);//背景图片
9             background-repeat: no-repeat;//背景不平铺
10             background-attachment: fixed;//定义背景图片随滚动轴的移动方式
11         }
12     </style>
13 </head>
14 <body>
15     <p>图像不会随页面的其余部分滚动。</p>
16     <p>图像不会随页面的其余部分滚动。</p>
17     ...
18     <p>图像不会随页面的其余部分滚动。</p>
19 </body>
20 </html>
这样转动转轴文字滚动，背景不动。

猜你喜欢