css3 中background的新增加的属性的用法(一)

关于background属性用法，相信许多重构人员都很熟悉了，在css3中，background属性依然保持以前的用法，不过可以允许在该属性中添加多个背景图像组，背景图像之间通过逗号进行分隔。增加了4个新的相关属性。

background-clip 指定背景的显示范围

background-origin 指定绘制背景图像的起点

background-size 指定背景图片的尺寸的大小

background-break 指定内联元素的背景图像进行平铺时的循环方式

background-clip

目前webkit引擎的safari和chrome浏览器支持，mozilla Gecko引擎和Presto引擎（opera11.0以上）和trident引擎(ie9以上)都支持这个属性，但是版本低的可能需要带上各自的私有属性,

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

background-clip 属性用来判断背景是否包含边框区域，一般默认的background-color是从元素的边框的左上角起到右下角为止，而backround-image却不一样，从padding边缘的左上角到border右下角边缘为止；用background-clip控制背景色和背景图片的显示区域，解决以上默认的问题，

border-box：从边框区域向外裁剪背景；

padding-box:从补白区域向外裁剪背景；

content-box:从内容区域向外裁剪背景

no-clip:从边框区域向外裁剪背景

css3 中background的新增加的属性的用法(一)相关推荐

CSS3中的一些新特性(CSS)
CSS3中的一些新特性 CSS3能做什么边框阴影 box-shadow 颜色文字与字体背景 CSS3中的动画 CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大 ...
CSS3中伪元素::before和::after的经典用法
::before 和 ::after其实就是附着在元素前后的伪元素. 说他是"伪"元素的意思就是,元素不是在DOM中生成的,而是在浏览器渲染引擎渲染CSS的时候添加上去的. 如果百 ...
在html table 标签的中background和bgcolor两个属性有什么关系？
两者没有关系,一个设置制定标签的背景图片一个是设置背景颜色. 是HTML中标签的背景颜色属性,而background是CSS中的属性,bgcolor只定义背景颜色. background可以定义如下属 ...
html display失效,CSS3 中 transition-duration 对 display: none/block 属性无效？
代码如下面所示,我用 transition-duration 对 display: none/block 属性和 width 属性进行2秒慢动作切换.但是,实际展示的时候,width 变换确实用了2秒 ...
CSS3中背景与边框相关样式
1 与背景相关的新增属性 background-clip:指定背景的显示范围. background-origin:指定绘制背景图像时的起点. background-size:指定背景中图像的尺寸. ...
css3中的变形（transform）、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
Css3中的响应式布局的应用
Media Queries直译过来就是"媒体查询",在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css& ...
三分钟学会css3中的flexbox布局
2019独角兽企业重金招聘Python工程师标准>>> 这篇文章里我们将学习CSS里flexbox布局的几个最重要的概念,通过学习flexbox布局,你会发现以往遇到的所有的关于布局 ...
从零开始前端学习[32]:css3中新增加的一些文本属性
css3中新增加的一些文本属性 css中相关的文本属性 css3中增加的一些文本属性 direction文本显示方向多行超出文本显示省略号 text-shadow字体的阴影设置 text-strok ...

css3 中background的新增加的属性的用法(一)

css3 中background的新增加的属性的用法(一)相关推荐

最新文章

热门文章