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( ...
随机推荐
- Effective C++ 条款42
本节条款我们讨论一下class 关键字和typename关键字的不同以及对于模板函数(template function)的影响. 例如以下代码: template<class T> T ...
- 读写ini配置文件 .
ini文件的第一行不能是有效内容(不能为section),否则读出键值为空. INI文件是一个无固定标准格式的设置档.它以简单的文字与简单的结构组成,常常使用在视窗操作系统,或是其他操作系统上,许多程 ...
- 字符串函数---strcat()与strncat具体解释及实现
一.strcat()与strncat() strcat():strcat(dest,src); strcat把src所指向的字符加入到dest结尾处(覆盖原dest结尾处的'\0').并 ...
- dp求顺序hdu1160
题意是仅仅求一次的顺序.先依照速度从大到小排序,速度想等到按体重增序排列. 然后基本就变成了求已定顺序序列的最长递增序列递增,跟那个求一致最大序列和的基本一致. dp[i]里存储的是到当前i最大的递增 ...
- 3144: [Hnoi2013]切糕
3144: [Hnoi2013]切糕 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1526 Solved: 827[Submit][Status] ...
- html5--6-9 CSS选择器6--伪类选择器
html5--6-9 CSS选择器6--伪类选择器 实例 @charset="UTF-8"; /*:root{background: green}*/ /*li:first-chi ...
- WAS:节点不同步问题
刀片服务器硬盘坏了,换了硬盘后,通过dmgr无法重启该节点上的server. 单机./starServer 后,服务虽然启动了,但后台一直提示如下: [-- ::: CST] RoleViewLead ...
- hdu 3746 Cyclic Nacklace(next数组求最小循环节)
题意:给出一串字符串,可以在字符串的开头的结尾添加字符,求添加最少的字符,使这个字符串是循环的(例如:abcab 在结尾添加1个c变为 abcabc 既可). 思路:求出最小循环节,看总长能不能整除. ...
- g00 网站说明
最近在做dns tunnel检测,发现了一堆类似这样的域名:c-6rtwjumjzx7877x24uwjkjwjshjx78x2eywzx78yjx2ehtr.g00.medicinenet.com ...
- 90年代经典“手游”—拼图板小游戏Opencv实现
80后可能还对儿时玩过的一种经典木质的拼图板游戏记忆犹新,一般是一种4*4或5*5规格的手持活动板,通过挪动每个小板子的位置,拼出来板子上完整的图像,那时候还没有网吧,手机也还是大哥大的天下,所以这也 ...