`

css3 背景属性新特性

    博客分类:
  • CSS3
阅读更多
以往通过图片修饰页面的途径,在css3中得到了改善,对页面性能也有了一定的提升。

background-size设置背景图像大小
设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。
语法:background-size: auto | <长度值> | <百分比> | cover | contain;
cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器;
contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
background-size:10px 5px;
-webkit-background-size:10px 5px;


background-origin
设置元素背景图片的原始起始位置。
语法:background-origin : border-box | padding-box | content-box;
分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。

background-clip确定背景的剪裁区域
将背景图片做适当的裁剪以适应实际需要。
语法:background-clip : border-box | padding-box | content-box | no-clip;
border-box. 从border区域向外剪裁背景
padding-box. 从padding区域向外剪裁背景
content-box.  从内容区域向外剪裁背景
no-clip


background颜色渐变
type:linear线性渐变radial径向渐变
background:-webkit-gradient(linear,0 0,/*渐变开始x和y坐标*/
0 100%,from(#FFF),to(#000));
分享到:
评论

相关推荐

    CSS基础2-选择器进阶+背景属性+元素显示模式+三大特性

    CSS基础-选择器进阶+背景属性+元素显示模式+三大特性

    前端领域,运用CSS3实现页面动态效果

    CSS3 是 CSS(级联样式表)的最新版本,它引入了许多新特性,以帮助开发者更轻松地创建复杂的样式和布局。CSS3 提供了许多新的选择器、属性、函数和值,以支持更丰富的样式设计。 以下是一些 CSS3 的重要特性: 选择...

    使用HTML开发商业网站-CSS3高级特性课件.pptx

    背景属性 定位属性 布局属性 元素宽高属性 CSS高级特性 定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。为了体验CSS优先级,首先来看一个具体的例子,其CSS样式代码如下: p{ ...

    CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation

    《CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation》分为3部分:第1部分是HTML/CSS基础和CSS 3新特性演示,涵盖盒子模型、浮动布局、属性前缀、选择器、字体、边框、背景、颜色、变换、动画、弹性盒子...

    CSS第02天(选择器进阶+背景相关属性+元素显示模式+三大特性)总结.xmind

    CSS第02天(选择器进阶+背景相关属性+元素显示模式+三大特性)总结针对css初学者的提升思维导图学习路线

    day04(CSS02-选择器进阶+背景相关属性+元素显示模式+三大特性).rar

    day04(CSS02-选择器进阶+背景相关属性+元素显示模式+三大特性).rar

    HTML5&CSS3网页制作:CSS层叠性.pptx

    CSS高级特性--CSS层叠性 CSS层叠性 01 CSS层叠性 层叠性是指当一个标签被设置了多个重复的样式的时候,一个属性会覆盖另外一个属性。 比如:先给div设置背景颜色为红色,然后设置背景颜色为粉红色,那么最终颜色可能...

    熟练掌握CSS 高级技巧 强化CSS

    css资料 # 课程目标: &gt; 1. 学会使用CSS选择器 ... 熟练掌握CSS背景属性 &gt; 7. 熟练掌握CSS三大特性 &gt; 8. 熟练掌握CSS盒子模型 &gt; 9. 熟练掌握CSS浮动 &gt; 10.熟练掌握CSS定位 &gt; 11.熟练掌握CSS高级技巧强化CSS

    《CSS设计彻底研究》光盘源码

     3.2.4 实验3——边框与背景   3.3 内边距(padding)   3.4 外边距(margin)   3.5 盒子之间的关系   3.5.1 HTML与DOM   3.5.2 标准文档流   3.5.3 div 标记与 span 标记   3.6 盒子在标准...

    css3 中的新特性加强记忆详解

    css3被拆分成如下的小模块,选择器,盒模型,背景和边框,文字特效,2D/3D转换,动画,多列布局和用户界面 2D转换 使用transform:属性来为元素设置2D转换,兼容浏览器加前缀 –webkit- -moz- 使用rotate()方法,让...

    css设计彻底研究 源代码

     3.1 盒子的内部结构 3.2 边框(border) 3.2.1 实验1——border-style 3.2.2 属性值的简写形式 3.2.3 实验2——属性的缩写形式 3.2.4 实验3——边框与背景 3.3 内边距(padding) 3.4 外边距...

    CSS3网页设计与制作(6-11):颜色特性/新型盒模型/边框/背景/渐变

    CSS3规范并不是独立的,它重复了CSS的部分内容,但在其基础上进行了很多的增补与修改。...本课程是《CSS3网页设计与制作》系列课程的6-11章内容,主要包含颜色特性、文本属性、盒模型、边框属性、背景属性等知识点

    利用div+css3实现一个背景渐变的button按钮的示例代码

    本文利用div和css3新属性,实现了一个背景渐变的按钮,具体如下: 1.background: linear-gradient 背景为渐变色属性 2.利用css3中动画特性animation,实现背景从左至右变化(color_move) 3.为了实现渐变效果,将...

    html、css最全知识点总结

    11、精灵图的使用及其优点(所谓精灵图就是把网页中一些png的小图标放在一张图片上,使用背景定位属性去调整图片的位置,一般使用负值 目的:减轻服务器的压力,静态资源(图片)在加载的时候是需要时间的。)

    《CSS设计彻底研究》【中文PDF+源代码】

    3.2.4 实验3——边框与背景 3.3 内边距(padding) 3.4 外边距(margin) 3.5 盒子之间的关系 3.5.1 HTML与DOM 3.5.2 标准文档流 3.5.3 div 标记与 span 标记 3.6 盒子在标准流中的定位原则 3.6.1...

    尚硅谷-bootstrap

    本套视频旨在向学员全面剖析css3中的新增的各类属性与方案。深入了解预处理less,并从源码的角度解读bootstrap相关实现。CSS3是最新的 CSS 级别,对CSS2.1中的边框、背景、文本、字体等做了扩展。新增2D、3D变换,过渡...

    css3中背景尺寸background-size详解

    background-size是css3提供的一个新特性,它可以让你随心所欲的控制背景图片的大小。下面我们来一步步看看这个新特性都有什么值得我们惊艳的地方

Global site tag (gtag.js) - Google Analytics