css3整理--background-size
background-size语法:
/*Mozilla*/ -moz-background-size: auto || <length> || <percentage> || cover || contain
/*Webkit*/ -webkit-background-size: auto || <length> || <percentage> || cover || contain
/*Presto*/ -o-background-size: auto || <length> || <percentage> || cover || contain
/*W3c标准*/ background-size: auto || <length> || <percentage> || cover || contain
参数:
auto:默认值,就是使用背景图保持原样,不做任何参数修改,这个效果就相当于没加background-size效果一样
length:指定两个值,单位px,分别制定背景图的宽度和高度
percentage:指定两个百分数,但同length指定宽高不同的是,percentage指定的百分比是根据被设置背景图片的容器的大小为基准的
cover:background-size取值为cover时,背景图片自己会放大到适合容器的尺寸
contain:cover是把背景图片放大到适合元素容器的尺寸,这时的contain刚好是跟cover相反,是把背景图片缩小到适合元素容器的尺寸
css3整理--background-size的更多相关文章
- CSS3中background属性的调整
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- css3 背景background
Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...
- css2和CSS3的background属性简写
1.css2:background:background-color || url("") || no-repeat || scroll || 0 0; css3: backg ...
- css3整理-方便查询使用
最近详细地研究了CSS3的相关内容,并整理了这个文档,方便以后查询使用,分享给大家. 案例代码大家可以下载参考下:https://gitee.com/LIULIULIU8/CSS3 1.边框属性bor ...
- css3之background
background background: (1)url(image1.png) right bottom, (2)url(image2.png) center, (3)url(image3.png ...
- css3的Background新属性
前言 CSS3中出现了几种关于背景图片的新属性:background-origin.background-clip.background-position等.之前大致了解了下,但是background ...
- CSS背景和CSS3背景background属性
css背景属性用于定义HTML元素的背景 背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...
- css3整理--::selection
::selection作用: 当使用鼠标选择文本时,改版被选中文本的背景色和前景色.(默认情况下,window中背景色是深蓝色,前景色是白色.) ::selection语法: /*Mozilla Fi ...
- css3整理--background-image
background-image语法: background-image: url1,url2,...,urlN; 通过“,”分隔N张背景图片,background的所有其它属性需要配合该属性进行设置 ...
- css3整理--gradient
gradient语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, & ...
随机推荐
- 移动端适配方案 flexible.js
前言 移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...
- Knockout.Js官网学习(Mapping高级用法一)
前言 有时候,在使用ko.mapping.fromJS的时候,可能有必要去使用mapping的高级用法来定义mapping的详细过程,以后定义了,以后再调用的时候就不必再定义了.这里有一些情形,你可能 ...
- windows下php7.1安装redis扩展以及redis测试使用全过程(转)
最近做项目,需要用到redis相关知识.在Linux下,redis扩展安装起来很容易,但windows下还是会出问题的.因此,特此记下自己实践安装的整个过程,以方便后来人. 一,php中redis扩展 ...
- AI通过了艺术创作图灵测试,你根本分不出来作者是不是人
各位geek朋友们,今年不用再看画了:近年来最大的艺术成就已经发生了. 这项艺术成就的诞生地,不是北京.新加坡.柏林郊区颜料四溅的画室中,不是威尼斯双年展上.请记住它出现的地点:美国新泽西州新布朗斯维 ...
- ROS中测试机器人里程计信息
在移动机器人建图和导航过程中,提供相对准确的里程计信息非常关键,是后续很多工作的基础,因此需要对其进行测试保证没有严重的错误或偏差.实际中最可能发生错误的地方在于机器人运动学公式有误,或者正负号不对, ...
- 阿里云Logtail 快速诊断工具
当日志采集发生异常时,您可以通过Logtail自助检测工具查看客户端是否存在异常情况,根据工具提示快速定位并解决问题. 说明 本工具目前仅支持Linux系统的服务器. 准备工作 下载检测工具脚本. ...
- Android——TabHost(标签容器)相关知识总结贴
android 2.3 r1 中文 api (58) —— TabHost http://www.apkbus.com/android-18911-1-1.html android中文api (5 ...
- Hadoop2.2.0分布式安装配置详解[3/3]
测试启动 按照下面的每一步执行,执行完一定要看输出的信息,注意warn或error或fatal的情况.因为这都是可能是问题出现的地方.出现一个问题,不解决,可能就会影响接下来的测试.这才是真正的工作量 ...
- 查看修改添加环境变量的工具——Rapid Environment Editor
工欲善其事,必先利其器! 特别是公司或者有其他限制的时候,更需要一个比较简单.实用.强大的工具了! 原来的公司都是小公司,给电脑安装系统.软件等都是自己直接上手,现在在一个大点的公司了,电脑运维有单独 ...
- python os.system()和os.popen()
1>python调用Shell脚本,有两种方法:os.system()和os.popen(),前者返回值是脚本的退出状态码,后者的返回值是脚本执行过程中的输出内容.>>>hel ...