CSS学习笔记11 CSS背景

2018-06-24 01:33:07来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

background-color:背景色

前面我们经常用background-color这个属性来设置元素的背景色,例如下面这条css可将段落的背景色设置为灰色

p {background-color: gray;}

如果想要元素的背景色向外延伸,则只需增加内边距即可

background-color可以为所有元素设置背景色,这包括 body 一直到 em 和 a 等行内元素。

注意:background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。

 

background-image:背景图像

除了可以为元素设置背景色之外,还可以用background-image属性为元素设置背景图像,其默认值是 none,表示元素背景上没有放置任何图像。

如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:

body {background-image: url(img/a.jpg);}

通常情况下背景应用于 body 元素。

注意:同background-color一样,background-image 也不能继承,事实上,所有背景属性都不能继承。背景图片会盖住背景颜色。也就是说背景图片的优先级要高于背景色。

 

background-repeat:背景重复

上面中的例子中,我们看到图片铺满了整个屏幕,如果需要设置是否需要平铺以及平铺的方向,可以使用background-repeat属性

属性值

效果

repeat

水平垂直方向上都平铺

repeat-x

水平方向上平铺

repeat-y

垂直方向上平铺

no-repeat

不平铺

 

 

 

 

 

 

 

 

 

background-position:背景定位

默认情况下,背景图片的位置的在元素的左上角,这时可以利用 background-position 属性改变图像在背景中的位置。

 

background-position可能的值

 

background-attachment:背景关联

scroll: 默认值,背景图像会随着页面其余部分的滚动而移动。
fixed:固定显示,相对于body固定。一般只用于body的背景设置。

 1 <!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>

 

属性合写

可以将上面讲到的属性用background属性进行合写,通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。

background合写的顺序: 背景颜色、背景图地址、平铺设置、背景图滚动、背景图位置。如:

 1 <!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: yellow url(img/a.jpg) no-repeat scroll center top;
 9         }
10     </style>
11 </head>
12 <body>
13     <p>段落1</p>
14     <p>段落2</p>
15     ...
16     <p>段落20</p>
17 </body>
18 </html>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS清浮动方法总结

下一篇:用vue开发一个app(3,三天的成果)