0
点赞
收藏
分享

微信扫一扫

CSS的background详解

夜空一星 2022-12-01 阅读 144


在CSS2.1里,background属性的简写方式包含五种属性值


–background-color,background-image,background-repeat,background-attachment, andbackground-position。



从CSS3开始,又增加了3个新的属性值,加起来一共8个。下面是按顺序分别代表的意思:

background:

[background-color] [background-image] [background-repeat][background-attachment] [background-position] / [ background-size][background-origin] [background-clip];


注意里面的反斜杠,它更font和border-radius里简写方式使用的反斜杠的用法相似。反斜杠可以在支持这种写法的浏览器里在position后面接着写background-size。


除此之外,你开可以增加另外两个描述它的属性值:background-origin和background-clip.




它的语法用起来像下面这个样子:


.example {background: aquamarine url(img.png)    no-repeat    scroll    center center / 50%    content-box content-box;}




你可以用下面的演示检测你的浏览器是否支持这种写法:


关于浏览器的支持情况,大概所有的现代浏览器都支持这些新属性值,但对于一些非常老旧的浏览器(IE6/7/8),最好在代码里提供一些万一不支持的补救机制。

举报

相关推荐

0 条评论