CSS中background属性如何使用-创新互联

CSS中background属性如何使用,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

创新互联建站坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站制作、成都网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的南康网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

background 属性是background-color,background-image,background-position,background-attachment,background-repeat,这五个属性的缩写,优点是比单个属性书写要简单,要少写很多代码。就是有时令人在书写这五个属性的顺序上有些困扰。下面一段代码取自搜狐:


代码如下:


.bBot{background:url(../images20130624/bg.png) no-repeat -1424px -5px;overflow:hidden;height:1px;clear:both;font-size:0px; overflow:hidden;}
.cBot{background:url(../images20130624/sohubg01.png) 0 -181px repeat-x;width:758px;height:6px;clear:both;font-size:1px;margin:0 auto;}



.bBot 选择器的background属性的顺序是background-image,background-repeat,backgroundf-position。(background-repeat在前,backgroundf-position在后)

.cBot 选择器的background属性的顺序是background-image,background-position,background-repeat。(background-position在前,background-repeat在后)

就是同一个公司的CSS的风格书写都不一样的,觉得有点不应该。

那就让我们看看CSS的background属性的官方定义:

Value: ['background-color'> ||<'background-image'> || <'background-repeat'>|| <'background-attachment'> ||<'background-position'>] | inherit
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentages: allowed on 'background-position'
Media: visual
Computed value: see individual properties

上面表格的内容只是定义的background属性的值包含那些内容,但并没有指定这些值的顺序(不过可以认为这是建议顺序,如果都这样做,代码可读性更好)。

总结:

background属性的值的书写顺序官方并没有强制标准的。
为了可读性,定一个CSS书写规范,规则2.1:background的值的顺序是background-color,background-image,background-repeat,background-attachment,background-position。

关于CSS中background属性如何使用问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


分享文章:CSS中background属性如何使用-创新互联
路径分享:http://bzwzjz.com/article/cspceh.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都商城网站建设 移动网站建设 网站设计制作报价 网站建设方案 网站建设推广 成都网站设计公司 成都模版网站建设 成都网站建设 成都网站设计 成都网站建设公司 成都网站制作 成都网站制作 企业网站设计 高端网站设计 营销网站建设 重庆网站建设 盐亭网站设计 高端品牌网站建设 定制网站建设多少钱 响应式网站设计方案 高端网站建设 移动手机网站制作