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>

这样转动转轴文字滚动,背景不动。

相关推荐