053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

css背景设置解析

时间:2017-08-15

1。背景设置语法:background-color:#5b8a00;  /* 设置页面背景颜色 */

2.背景图片语法:background-image:url(03.jpg); /* 页面背景图片 */

3.背景图片的重复:

 

以下为引用的内容:

 background-image:url(bg1.jpg);  /* 背景图片 */
 background-repeat:repeat-y;   /* 垂直方向重复 */
 background-color:#0066FF;   /* 背景颜色 */

 

效果如下:

css背景设置解析

4.背景图片的位置:一般背景图片默认是从左上角出现并重复出现。我要指定图片在其他位置怎么办?看代码:

以下为引用的内容:

 background-image:url(bg4.jpg);  /* 背景图片 */
 background-repeat:no-repeat;  /* 不重复 */
 background-position:bottom right; /* 背景位置,右下 */
 background-color:#eeeee8;

通过background-repeat:no-repeat;  /* 不重复 */
 background-position:bottom right; /* 背景位置,右下 */这两句设定背景不重复。然后在右下角出现。
 
背景图片的定位应用:在网页的用用大的图片做为背景,让文字浮动在图片之上。实现很好的效果
 
 
5.固定背景图片
 
就是背景固定不东,文字浮动在背景上移动。效果:
css背景设置解析

看看代码:

以下为引用的内容:

 padding:0px; margin:0px;
 background-image:url(bg6.jpg);  /* 背景图片 */
 background-repeat:no-repeat;  /* 不重复 */
 background-attachment:fixed;  /* 固定背景图片 */

 
其中用了background-attachment:fixed;  /* 固定背景图片 */这个命令即可固定图片。
相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP