background-size 属性" title="CSS3 background-size 属性">
定义和用法
background-size 属性规定背景图像的尺寸。
默认值: | auto |
---|---|
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.backgroundSize="60px 80px" |
语法
background-size: length|percentage|cover|contain;
值 | 描述 | 测试 |
---|---|---|
length |
设置背景图像的高度和宽度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。 |
测试 |
percentage |
以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。 |
测试 |
cover |
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 |
测试 |
contain | 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 | 测试 |
亲自试一试 - 实例
- 拉伸背景图像
- 拉伸背景图像来完全覆盖内容区域。
- 拉伸背景图像,对背景图像水平复制四次
- 对背景图像进行拉伸,以使背景图像恰好水平复制四次。
CSS3 background-size 属性的更多相关文章
-
CSS3 background属性
background: #00FF00 url(bgimage.gif) no-repeat fixed top; background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性: ...
-
css3 background
background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个 ...
-
background复合属性详解(上):background-image
background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...
-
CSS3利用text-shadow属性实现多种效果的文字样式展现
一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...
-
CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
-
CSS3新增文本属性实现图片点击切换效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
-
半深入理解CSS3 object-position/object-fit属性
半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...
-
CSS3:文字属性
文字属性注意的细节: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
-
利用css3的text-shadow属性实现文字阴影乳白效果
现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...
-
CSS3的新属性
1.圆角矩形 .border_radius_test{ border-radius:25px; -moz-border-radius:25px; } 数值越大越圆 2.容器阴影 .box_shadow ...
随机推荐
-
修改tomcat默认编码
实际项目中一般是用utf-8的,而Tomcat的默认编码则是iso-8859-1, 因此我们通常编辑conf/下的server.xml,配置Connector项,加上属性URIEncoding=&qu ...
-
安卓第十天笔记-fragment
安卓第十天笔记-fragment Fragment(片段) 一.Fragment简介 *Fragment是3.0引入的API,主要为了解决平板,大屏幕手机显示问题 *Fragment代表了Activi ...
-
第k大的数,前k大的数
1.排序后去出前k个,o(n*log(n)) 如果k<log(n),可以考虑直接选择排序,因为只需要执行找到第k个就可以结束 o(n*k) 2.o(nlog(k))快排把数分为了两个部分, ...
-
nmblookup
域网内可以通过下述命令来根据ip地址查询其他主机名(Linux) 使用nmblookup -A ip命令查询 [admin@v015213 ~/lpmall]$ nmblookup -A 10.19. ...
-
Inno Setup 系统托盘图标插件 TrayIconCtrl V1.5
原文 http://restools.hanzify.org/article.asp?id=93 V1.5 修正在某些 Windows 平台上(例如 Windows XP SP3)不能正常运行的问题. ...
-
LoadImage()的使用
系统中的定义是: WINUSERAPIHANDLEWINAPILoadImageA( HINSTANCE, LPCSTR, UINT, int, int, UINT ...
-
equal与==区别
对于String中的“equal方法”和“==”一直有点混肴,今天重新看了一下他们两点的区别,记录下来让自己以后不在忘记! 先说“==”: “==”是用来比较两个String对象在内存中的存放地址是否 ...
-
Ubuntu14.04安装Matlab2013a
source url: http://blog.sina.com.cn/s/blog_ec5021d60102v3ky.html 1. 为方便操作,把Matlab镜像文件(iso)重命名为'Matla ...
-
学习ASP.NET Core Razor 编程系列十九——分页
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
-
Python3中如何解决中文乱码与编码的问题
1.解决乱码问题: pyhton中内部所有编码是Unicode,中文是gbk:正常情况下,我们输出的是utf-8: 我们可以采用sys.getdefaultencoding()查看系统默认的编码: 解 ...