background-size属性
background-size:属性有 auto;length ;百分比
length 如:10px 20px 固定的
或者是写成一个 ,10px 另外一个就默认为 auto;
写成百分比的形式 是相对于div的宽度或者是高度的 包含padding 但是不包含 border的
background-size:cover 意思是背景图片全部填满整个div,往往需要配合background-position:center;来使用,是图片的中间和div的中间在一个中心点。唯一的
缺点就是需要制作一个足够大的背景图片,否则图片会失真。
background-size:contain 可以是背景图像保持本身的宽高比例,将背景图片缩放到宽度或者高度正好适应定义的背景区域。
总之,只有当background-size:值默认为auto的时候,背景图片才不会失真,而其他设置都会导致背景图片的失真,所以使用
的时候要仔细考虑,避免带来不良的后果。
具体的可以自己写一个demo来验证一下。就写到这里。
background-size属性的更多相关文章
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- background复合属性详解(上):background-image
background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...
- 项目总结——SqlParameter的参数设置长度(size属性)
看到很多朋友在实例化SqlParameter时,通常都没有指定参数的长度就直接给参数赋值了.就像下面的写法: new SqlParameter("@address", SqlDbT ...
- background系列属性
1.background-color背景颜色属性 ①颜色表示方法 英语单词:red blue purple skyblue. rgb:r代表红色 g代表绿色 b代表蓝色 也 ...
- 今天碰到一个问题,怎么限制用户在固定宽度的input输入框里输入的长度,由此涉猎到了maxlength属性和size属性以及它们的区别。
最开始想首先要强制在一行,另外超出的隐藏.还有一个思路是把value的值的长度和框的长度怎么联系起来,具体怎么联系我也不知道. 在解决另外一个问题的时候,哥发给我的代码里无意中看见input有个max ...
- size属性
size 属性 size 属性规定输入字段的尺寸(以字符计): <form action=""> First name:<br> <input typ ...
- 前端CSS-font属性,超链接的美化,css精灵,background综合属性
前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...
- C# 调用存储过程出错:String[3]: Size 属性具有无效大小值 0
存储过程如下 Create PROCEDURE [dbo].[Test] @FundId int, @vchStrategyToken nvarchar(), @ErrorMessage nvarch ...
- CSS探案之 background背景属性剖析
首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...
- [转]实例化SqlParameter时,如果是字符型,一定要指定size属性
转自:http://bbs.csdn.net/topics/380155255 以前在实例化SqlParameter时,通常都是用下面的语句,没有设置size属性: new SqlParameter( ...
随机推荐
- JAVA BigDecimal 高精度运算
文章参考一位博友,由于时间太久忘了链接,见谅! public class BigDecimalUtils { private static final int DIV_SCALE = 10;// 除法 ...
- jquery一个比较好的轮播图jQuery.kinMaxShow介绍
kinMaxShow API 可选参数以及详解 kinMaxShow 主参数详解 参数名称 默认值 简单释义 height 500 [整型 (单位:像素)]焦点图高度,必须设置 缺省则启用默认高度 5 ...
- 我遇到的错误curl: (7) Failed to connect to 127.0.0.1 port 1086: Connection refused
今天我用curl命令,无论如何都是出现: curl: (7) Failed to connect to 127.0.0.1 port 1086: Connection refused 找了很久,不知道 ...
- eclipse debug configurations arguments指定文件路径参数
1 eclipse debug configurations arguments指定文件路径参数 使用绝对路径,但是这个文件必须要放在该project的源码路径的外面才行,否则eclipse不认这个文 ...
- MongoDB and Redis
简介 MongoDB更类似MySQL,支持字段索引.游标操作,其优势在于查询功能比较强大,擅长查询JSON数据,能存储海量数据,但是不支持事务. Mysql在大数据量时效率显著下降,MongoDB更多 ...
- extjs4.0 treepanel节点的选中、展开! 数据的重新加载
1.extjs4.0API较3.0有非常大变化2.多级子父节点的选中和展开.3.数据的重新加载.tree.getStore().load4.节点的移除,从树中根据ID获取节点 tree.getStor ...
- linunx 下载文件到本地
1.检查并安装相应的包:yum install lrzsz 2.使用 sz 文件名 现在相应的文件到本地磁盘. 3.上传使用rz 选择相应文件即可.
- HDU2295 Radar —— Dancing Links 可重复覆盖
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2295 Radar Time Limit: 2000/1000 MS (Java/Others) ...
- ExtJS常用代码集合
ExtJS常用代码集合,包括弹出提示框,登陆框,树状结构等等.1. [代码]弹出提示框 <html> <head> <title>Ge ...
- 一步一步学Silverlight 2系列(29):使用Transform实现更炫的效果(上)
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...