CSS3新增背景样式

background-clip

  • 指定背景的填充范围,可指定为padding,border,content,分别表示填充至内边距,边框,默认为border。
  • 值得注意的是在Firefox中该属性表现为-moz-background-clip,其他几个主流浏览器中表现为-webkit-background-clip
div{
  background:green;
  width:200px;
  height:300px;
  padding:30px;
  border:dashed 10px black;
  margin-left:30px;
  -webkit-background-clip:content;
  -moz-background-clip:content;
}

background-origin

  • 在绘制背景图片时是默认从内部补白的左上角开始的,但我们可以利用这个属性对其做出改变
  • 分别为padding,border,content,表示从内部补白、边框、内容区域左上角开始绘制
div{
-webkit-background-origin:padding;
-moz-background-clip:content;
}

background-size

  • 该属性用于指定背景图片的的大小,有俩个参数分别为横向大小和纵向大小,当想要保持原图片大小比例时,可以只设置一个定值,另一个设置为auto
div{
background-size:30px auto;
}

同一元素内设置多张背景图片

  • 在CSS3中可通过对关于背景图片的属性用逗号隔开,来对同一元素设置多个背景图片,如下:
div{
 background-image:url(1.png),url(2.png),url(e.jpg);
 background-repeat:no-repeat,repeat-x,repeat-y;
background-position:3% 98%,85%,center center;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • background应该是CSS里使用频率颇高的属性,简单实用。但参数偏多,本篇就介绍一下background的各...
    张歆琳阅读 4,356评论 4 26
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,065评论 1 4
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,816评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,350评论 0 11
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,666评论 0 7