本文作者:DurkBlue

详细解答css3关于多重背景的那些事推荐

DurkBlue 2019-11-27 1685 抢沙发
详细解答css3关于多重背景的那些事摘要: 以前CSS没有支持多个背景写在一个标签里面的时候,由于一个盒子需要多个背景,往往需要分开加标签,而且各个层级有时候还很容易搞混,现在好了,css3支持多背景写法了。本文详细的讲解了...

以前CSS没有支持多个背景写在一个标签里面的时候,由于一个盒子需要多个背景,往往需要分开加标签,而且各个层级有时候还很容易搞混,现在好了,css3支持多背景写法了。本文详细的讲解了关于CSS3如何实现多个背景的代码。

css3多背景支持

css3多重背景依然是不支持IE9以下系列版本。其他高级浏览器都是支持的。

css3多重背景属性

background:

background-color

background-image

background-position

background-repeat

background-attachment

background-origin //css3新增属性

background-clip //css3新增属性

background-size //css3新增属性

background-origin 属性规定 background-position 属性相对于什么位置来定位。

注释:如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。·

默认值:padding-box
继承性:no
版本:CSS3
JavaScript 语法:object.style.backgroundOrigin="content-box"

语法

background-origin: padding-box|border-box|content-box;
描述
padding-box背景图像相对于内边距框来定位。
border-box背景图像相对于边框盒来定位。
content-box背景图像相对于内容框来定位。

background-clip 属性规定背景的绘制区域。

默认值:border-box
继承性:no
版本:CSS3
JavaScript 语法:object.style.backgroundClip="content-box"

语法

background-clip: border-box|padding-box|content-box;

 

描述
border-box背景被裁剪到边框盒。
padding-box背景被裁剪到内边距框。
content-box背景被裁剪到内容框。

background-size 属性规定背景图像的尺寸。

默认值:auto
继承性:no
版本:CSS3
JavaScript 语法:object.style.backgroundSize="60px 80px"

语法

background-size: length|percentage|cover|contain;
描述
length设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
percentage以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

对于目前来说,有一些浏览器(Safari 5, Firefox 4, Chrome 10)中不识别originclip,所以我们用基本的写法就可以了。

css3的多背景写法

p{background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px yellow;}

以上每个背景图片都是以层的形式显示,第一个在其他之上。

安全的做法是这样子

p{background:url(demo.gif) no-repeat; //这是写给不识别下面这句的默认背景图片

background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px; //这是高级浏览器的css多重背景,第一个最上面

background-color:yellow; //这是定义的默认背景颜色,全部适合

}

如果你想兼容IE低版本系列。

//code from http://caibaojian.com/css3-multiple-background.html
.button {
    height: 34px;
    padding: 0 1em 2px;
    border: 0;
    background: url(/study/image/gray_baidu_btn.png) 100% -36px no-repeat;
    background: url(/study/image/gray_baidu_btn.png) no-repeat, url(/study/image/gray_baidu_btn.png) 100% -36px no-repeat;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/study/image/gray_baidu_btn.png', sizingMethod='crop');
    font-size: 14px;
    overflow: visible;
    cursor: pointer;
}


此篇文章由DurkBlue发布,转载一下需要注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 2019-11-27
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论取消回复

快捷回复:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog

评论列表 (暂无评论,1685人围观)参与讨论

还没有评论,来说两句吧...