必须掌握的CSS知识-background属性
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了必须掌握的CSS知识-background属性,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2376字,纯文字阅读大概需要4分钟。
内容图文
![必须掌握的CSS知识-background属性](/upload/InfoBanner/zyjiaocheng/414/5b0f84a12d964b4a8cf78a9f636001d0.jpg)
css允许使用纯色作为背景,同样也允许使用图片作为背景。
关于背景的设置:
background-color
background-color:red;
—注意:background-color不能继承,其默认值是transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。
background-image
background-image:url(lks.jpg);
—注意:背景图片也是不能继承的,而且背景图片无法设置大小。
浏览器对图片格式的支持情况:gif 动画 256种颜色
jpg 颜色丰富,浏览器支持效果好
png w3c推荐的格式,但是浏览器支持的不太好(IE6,IE7,不支持)。
background-repeat
background-repeat:repeat; //默认 背景图像将在垂直方向和水平方向重复。 background-repeat:repeat-x; //背景图像将在水平方向重复。 background-repeat:repeat-y; //背景图像将在垂直方向重复。 background-repeat:no-repeat; //背景图像将仅显示一次。
background-attachment
background-attachment:scroll; //默认值。背景图像会随着页面其余部分的滚动而移动。 background-attachment:fixed; //当页面的其余部分滚动时,背景图像不会移动。
background-position
—注意:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。background-position:top left;
第一个是指垂直方向上,第二个是指在水平方向上,中间空格隔开。
垂直方向上可以设置:top、center、bottom;
水平方向上可以设置:left、 center 、right;
如果您仅规定了一个关键词,那么第二个值将是"center"。background-position:50% 50%;
默认值:0% 0%。
第一个值是水平位置,第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值,另一个值将是 50%。background-position:20px 30px;
第一个值是水平位置,第二个值是垂直位置。
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果您仅规定了一个值,另一个值将是50%。
注意:
1、当我们为body设置border后,我们会发现border只是圈住了body里面有内容的地方。但是为body设置背景色,则填充整个屏幕。
2、使用图像作为背景时,图像他的定位是参照屏幕的可视区域,而不是被border框住的部分。
3、当我们想要一次性设置背景时,我们顺序是有考究的。background:red url(xin.jpg) norepeat fixed center center;
每个参数使用空格隔开,依次是颜色,图片,重复,固定方式,位置。
事实上,我在浏览器中对他们的位置进行了各种颠倒后,发现IE6、IE7不是能很好的支持乱序后的设置,但是现代浏览器还是可以支持的。为了兼容性的考虑,建议使用上面的顺序。
欢迎补充与指正?
【相关推荐】
1. 免费css在线视频教程
2. css在线手册
3. php.cn独孤九贱(2)-css视频教程
以上就是必须掌握的CSS知识-background属性的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的必须掌握的CSS知识-background属性全部内容,希望文章能够帮你解决必须掌握的CSS知识-background属性所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。