5分钟彻底搞懂CSS Background

原文链接:http://www.jianshu.com/p/679e9c5b7840

background-image

  • 可以通过url("../image/sprite.png"); 引入, 这时候index.html与image文件夹是同一个层级的文件;
background-image: url(red.png), url(blue.png);
2870635-9e3c10331b257b71.png
引入两个url后的效果: 先引入的在上面, 后引入的在下面
  • 还可以在引入background-image之后继续写background-color, 这时候这个背景色会是在最底层;
background-color: green;
2870635-2c36e9e3679521d0.png
颜色总是在最底层

background-repeat

  • 值可以写 repeat-x, repeat-y, repeat, space(repeat的时候会在图和图之间留一点空隙), round(repeat的时候对图可能会有一点变形效果), no-repeat;
  • 引入几个background-image的url, 就允许最多写几次repeat值;
background-image: url(red.png);
background-repeat: no-repeat;
background-image: url(red.png), url(blue.png);
background-repeat: no-repeat repeat;
2870635-3c634915782c458a.png
写两个值的话, 第一个针对x轴, 第二个针对y轴
  • 可以看到的很重要的一点是, 如果blue的没有写的话, 那么会默认追随red的repeat设置, 也就是x轴no-repeat, y轴repeat;

background-attachment

  • 值:scroll/fixed/local;
  • scroll的时候移动滚动条, 背景是不会动的;
  • local的时候移动滚动条, 背景会和内容一起滑动;
    -fixed是说背景相对viewport绑定死, 一般不用;

background-position

  • 可以写left, right, top, bottom这样的关键词;
  • 也可以写百分比值;
  • 还可以写length, 也就是具体20px这样;
  • 可以写两个值, 第一个值表示x轴上的位置, 第二个是y轴上的位置;
  • position默认值是0 0
background-position: 10px 20px;
2870635-e174a491eb2b86e4.png
写length数值的时候是以左上角做原点来计算
background-position: 20% 50%;
2870635-c39ac2b1f505fb21.png
写percent百分比的时候, 是将image的百分比和整个容器的百分比做了对应, 因此50% 50%的时候就居中了
background-position: 0% 100%;
background-position: left bottom;

这两句话是等价的. 不过如果我们用关键字只写一个词的话, 另外一个默认是center;

background-position: right;
background-position: 100% 50%; 

这两句是等价的;
还有一种很特殊的写法, 是写四个值

background-position: right 10px top 20px;
2870635-d19aad7ab52413dc.png
写四个值的时候, left, top等关键词只表示从哪里开始数length了

sprite.png问题

  • 用image引入, 用repeat保证它不变形和重复, 用position定好位置;


    2870635-ba629b0eba2a502e.png
    引入sprite三部曲image, repeat, position

盒模型问题(background-origin&clip)

  • 默认状态下背景真正的位置在哪里?


    2870635-7ec8f931ea121511.png
    默认状态下背景是算到padding-box
  • 涉及的属性是background-origin

background-origin

  • 决定原点的位置; (repeat平铺的时候会溢出到padding-box外面)
  • 三个值: border-box/padding-box/content-box;
  • 如果设置成content-box的话(经常可能会调用这个属性值), 背景图将不会显示在padding部分上了;


    2870635-e175a642e44e848d.png
    content-box下padding区域没有背景图

background-clip

width: 300px;
height: 200px;
border: 20px solid transparent;
padding: 30px;
background-color: blue;
2870635-e4b4e41df6669d59.png
aaa所在的是content, 灰色部分是padding, 可以看到border也被背景蓝色覆盖
  • background-clip真正决定了当背景平铺或者就是单纯颜色的时候, 它能够铺到哪里;
  • 默认值是border-box; 可以自行修改成padding-box/border-box;

background-size

  • 对整个图片的宽度改变往往会导致变形;
  • 值可以写length, 比如 20px 20px, 图片一般会进行相应的放大缩小;
  • 也可以写percent, 比如 50% 50%, 表示宽度和高度都是容器的50%
  • 默认值是auto, 也就是原始图片的大小;
  • 特殊值cover, 让图片最小的轴覆盖全容器;
  • 特殊值contain, 让图片最长的轴覆盖全容器;

background(shorthand, 合写属性)

2870635-e3cb85359e8c1db6.png
按照image, position/size, repeat, origin, clip的顺序写
  • 注1: 最后如果只写一个content-box, 那么origin和clip都会被设置成content-box
  • 注2: background-color只能写在第二层, 也就是底层背景中;
2870635-8161e28f48b68dd1.png
shorthand写法建议参照网易云课堂的课件

参考资料

网易云课堂前端微专业

展开阅读全文

没有更多推荐了,返回首页