以往通过图片修饰页面的途径,在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基础-选择器进阶+背景属性+元素显示模式+三大特性
CSS3 是 CSS(级联样式表)的最新版本,它引入了许多新特性,以帮助开发者更轻松地创建复杂的样式和布局。CSS3 提供了许多新的选择器、属性、函数和值,以支持更丰富的样式设计。 以下是一些 CSS3 的重要特性: 选择...
背景属性 定位属性 布局属性 元素宽高属性 CSS高级特性 定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。为了体验CSS优先级,首先来看一个具体的例子,其CSS样式代码如下: p{ ...
《CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation》分为3部分:第1部分是HTML/CSS基础和CSS 3新特性演示,涵盖盒子模型、浮动布局、属性前缀、选择器、字体、边框、背景、颜色、变换、动画、弹性盒子...
CSS第02天(选择器进阶+背景相关属性+元素显示模式+三大特性)总结针对css初学者的提升思维导图学习路线
day04(CSS02-选择器进阶+背景相关属性+元素显示模式+三大特性).rar
CSS高级特性--CSS层叠性 CSS层叠性 01 CSS层叠性 层叠性是指当一个标签被设置了多个重复的样式的时候,一个属性会覆盖另外一个属性。 比如:先给div设置背景颜色为红色,然后设置背景颜色为粉红色,那么最终颜色可能...
css资料 # 课程目标: > 1. 学会使用CSS选择器 ... 熟练掌握CSS背景属性 > 7. 熟练掌握CSS三大特性 > 8. 熟练掌握CSS盒子模型 > 9. 熟练掌握CSS浮动 > 10.熟练掌握CSS定位 > 11.熟练掌握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被拆分成如下的小模块,选择器,盒模型,背景和边框,文字特效,2D/3D转换,动画,多列布局和用户界面 2D转换 使用transform:属性来为元素设置2D转换,兼容浏览器加前缀 –webkit- -moz- 使用rotate()方法,让...
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规范并不是独立的,它重复了CSS的部分内容,但在其基础上进行了很多的增补与修改。...本课程是《CSS3网页设计与制作》系列课程的6-11章内容,主要包含颜色特性、文本属性、盒模型、边框属性、背景属性等知识点
本文利用div和css3新属性,实现了一个背景渐变的按钮,具体如下: 1.background: linear-gradient 背景为渐变色属性 2.利用css3中动画特性animation,实现背景从左至右变化(color_move) 3.为了实现渐变效果,将...
11、精灵图的使用及其优点(所谓精灵图就是把网页中一些png的小图标放在一张图片上,使用背景定位属性去调整图片的位置,一般使用负值 目的:减轻服务器的压力,静态资源(图片)在加载的时候是需要时间的。)
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...
本套视频旨在向学员全面剖析css3中的新增的各类属性与方案。深入了解预处理less,并从源码的角度解读bootstrap相关实现。CSS3是最新的 CSS 级别,对CSS2.1中的边框、背景、文本、字体等做了扩展。新增2D、3D变换,过渡...
background-size是css3提供的一个新特性,它可以让你随心所欲的控制背景图片的大小。下面我们来一步步看看这个新特性都有什么值得我们惊艳的地方