background简写属性
来源:互联网 发布:易恒宝采集下载软件 编辑:程序博客网 时间:2024/05/16 16:03
现在流行组合,什么歌唱团体,TFboys、至上励合等等。background属性也赶时髦,它也有组合。我们知道background有很多的单个属性,有background-position
、background-repeat
等,我们可以把这些background的这些属性简写到组合中,它的格式为:
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position\] / [ background-size] [background-origin] [background-clip];
各个单个属性之间用空格分割
比如:
background: #ccc url(http://xiaoyangblogt.duapp.com/wp-content/uploads/2017/11/clip-1.png) repeat-x scroll 0px 0px / 400px 400px border-box padding-box;
background的这些简写属性不必全都写,不写的属性视为缺省值,采用默认值。
比如:
background:#ccc repeat;
缺省值这里要注意一下,其他的属性还好说,要特别注意background-position
和background-size
这两个属性,因为它们的值都是像0px 0px这种格式的,所以要用这种格式:[background-position] / [background-size]
,如果简写,没有“/”则表示为background-position
的值,而background-size
采用缺省值。
比如:
background:#ccc 0px 0px;
此处的0px 0px表示的是background-position
属性,而background-size
采用的是默认值。
还有background-origin
和background-clip
属性,他们的值也是一样的,都是border-box
、padding-box
和content-box
属性。所以在简写的时候也要注意,如果简写的属性值其中一个是缺省值,则保持他们的值是一致的。
比如:
background:#ccc border-box;
则表示background-origin
和background-clip
都采用border-box值。
你可能会有疑问,为什么都有单个的属性了,还要有简写属性,这是不是画蛇添足?当然不是,简写属性的好处就是:
- 可以向前兼容早期版本的浏览器
- 简写属性给出一个通用的背景采用的值,单个属性可以相对于某一需求覆盖简写属性的某属性的值。因为单个属性的优先级要高于简写属性的优先级
比如:
body{ background: #ccc 0px 0px;}body div{ background-color:#666;}
此时div中的background-color属性的值就是#666,而不是#ccc。
微信公众号:
原文链接
- background简写属性
- background简写属性
- background 背景属性的简写
- css3之background简写
- background属性
- background属性
- css简写 vertical-align background font
- CSS属性简写
- css简写属性格式
- CSS的简写属性
- 高效CSS属性简写总结
- CSS中(font和background)的简写形式
- background属性 设置有感
- CSS background-position 属性
- background 用法 属性
- css背景属性 Background
- android TextView background属性
- css 属性 background:transparent;
- 利用多线程与消息队列实现聊天
- python3 多线程 threading _thread
- 利用nginx搭建简单图片服务器实现负载均衡
- 一组数据中只有一个数字出现了一次,其他所有数字都是成对出现的。 请找出这个数字。
- ubuntu下安装新版QQ
- background简写属性
- 总结(12.3-12.10)
- codeforces 887B. Cubes for Masha
- Verilog中ISE联合Modelsim仿真,出现蓝线和红线的问题
- HOJ 2085 Wavio Sequence(双lis)
- 哈理工 oj 2188 星际旅行
- 校赛总结
- UI设计新手入门须知
- 语料库之专业名持续更新:【内向即失败--王奕君】