江苏龙网

  1. 主页 > 生活百科 > >

揭秘CSS实用技巧总结( 三 )

css


background 是一个简写属性，可以包括多个属性：background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size、background-attachment 。接下来我们一个个来看看这些属性的作用：

  • background-color 最常用的属性，默认不继承（background的所有属性都默认不继承），初始值为 transparent；有时候使用默认继承可以实现一些好玩的效果，比如倒影；
  • backgroundo-image 背景图片，可以逗号分割设置多个，可以是图片url或者渐变色；
  • background-clip 背景剪裁，可以逗号分割设置多个，值可以为 broder-box（初始值）、padding-box、content-box、text（新，将背景被文字剪裁）；
  • background-origin 设置背景起始点的相对区域，搭配 background-position使用，可以逗号分割设置多个，值可以是border-box、padding-box（初始值）、content-box；
  • background-position 设置背景的起始点，可以逗号分割设置多个，值可以是 10px 20px 、center center 、left 10px bottom 20px等等，非常灵活；
  • background-size 设置背景的大小，可以逗号分割设置多个，值可以是数字值如30px 40px、auto auto（初始值）、conver、contain；background-repeat: repeat就是根据这个尺寸大小来重复的 。
  • background-repeat 设置背景的重复方式，初始值为 repeat，常使用值的还有no-repeat；
  • background-attachment 设置背景图像的位置是在视口内固定，还是随着包含它的区块滚动 。可以逗号分割设置多个，值有scroll（初始值）、local、fixed 。详情查看MDN
简写时 background-size 只能紧接着 background-position 出现，以 / 分割，如： "center / 80%" 。
半透明边框
  • 关键实现：background-clip
  • 具体分析：由于background属性默认会覆盖整个盒模型包括边框border，所以设置border-color: rgba(0, 0, 0, .5)时会透出背景色，达不到半透明边框的效果 。css3增加了background-clip属性，定义背景填充的裁剪区域 。设置padding-box便可以实现半透明边框：地址
  border: 10px solid rgba(255, 255, 255, .5);  background: white;  background-clip: padding-box;
揭秘CSS实用技巧总结

文章插图
 
半透明边框
灵活的背景定位
  • 关键实现：backgrond-position background-origin
  • 具体分析：我们都知道background-position可以定位背景图片等位置，但是都是相对padding-box的左上角开始等 。css3 允许这样写：background-position: right 10px bottom 20px，同时 css3 还支持background-origin，其默认值如同其表现border-box，支持设为padding-box和content-box：地址
  height: 200px;  padding: 10px;  border: 5px solid cyan;  background: lightblue;  background: radial-gradient(#00a4fd, cyan) no-repeat right 100px bottom / 100px 100px;  background-origin: content-box;
揭秘CSS实用技巧总结

文章插图
 
背景定位
background-position 设为百分比值较为复杂 。百分比值实际上执行了以下的计算公式:
(container width - image width) * (position x%) = (x offset value)(container height - image height) * (position y%) = (y offset value)由计算公式可知：当值为0%时，实际偏移值为0px，此时图片的左边界（或上边界）和容器的左边界（或上边界）重合；当值为50%时，实际偏移值为容器减图片剩余空间的一半，图片左右边界（或上下边界）距离容器左右边界（或上下边界）相等，此时图片的中点和容器的中点重合 。当值100%时，实际偏移值为容器减图片的剩余空间，所以此时图片的右边界（或下边界）和容器的右边界（或下边界）重合 。二者之差为负值时同样有效 。地址
揭秘CSS实用技巧总结

文章插图
 
背景定位
条纹背景
  • 关键实现：background-image
  • 实现分析：利用线性渐变实现多种颜色的交错重复，形成条纹背景 。lienar-gradient的第一个参数是渐变的角度，可以是方向关键字to top（初始值，可忽略不写）等，也可以是角度90deg等；#fb3 50%指的是色标和终点位置值；这里linear-gradient的第二个位置值设置为0会被解析为前一个色标的位置值即50%，这样写更加符合DRY原则 。
background: linear-gradient(#fb3 50%, #58a 0);background-size: 100% 30px;


推荐阅读


上一篇：聊聊笔记本行业中的“认证标准”

下一篇：Win10藏着如此多秘密！Win10这些模式你知多少