CSS3 background-size 属性
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 ...
随机推荐
- vue基础学习(三)
03-01 vue的生存周期-钩子函数 <style> [v-cloak]{display:none;} </style> <div id="box" ...
- VS2010安装OpenGL
以下涉及到的所有资源都在这里: 链接:https://pan.baidu.com/s/1eSctT5K 密码:174s *我的VS2010的安装位置:D:\Program Files (x86)\M ...
- Python学习_02_数字和运算
python具有强大的科学运算功能,python由于支持更加强大的面向对象和动态特性,相比R语言.matlab.mathmatic等传统的科学计算工具具有非常大的优势. Python的数字 pytho ...
- linux下查看系统属性
inux下查看系统属性1.查看cpu信息查看所有cpu信息:cat /proc/cpuinfo查看cpu类型: grep "model name" /proc/cpuinfo2.查 ...
- Java容器---Map基础
1.Map API (1)Map 集合类用于存储元素对(称作"键"和"值"),其中每个键映射到一个值. java.util Interface Map<K ...
- springMVC(7)---表单标签
springMVC(7)---表单标签 form标签作用 简单来讲form表单有两大作用 1:第一就是往后端提交数据或者前端回显 ...
- Hibernate中关于HQL查询返回List<Object>数据的结果集问题
---恢复内容开始--- 开发中遇到的一个小问题,使用Hibernate中的HQL查询时,使用query.list()查询出来的是一个List<Object>结果集 原来代码: publi ...
- ajax struts2 数据的返回形式
这篇随笔算是接上篇的数据请求返回,上一篇关于分页用的返回的数据形式是json,http://www.cnblogs.com/tele-share/p/7192206.html这次主要探讨ajax从st ...
- ASP.NET Core中使用IOC三部曲(二.采用Autofac来替换IOC容器,并实现属性注入)
前言 本文主要是详解一下在ASP.NET Core中,自带的IOC容器相关的使用方式和注入类型的生命周期. 这里就不详细的赘述IOC是什么 以及DI是什么了.. emm..不懂的可以自行百度. 目录 ...
- 内网IP无法访问
就是我们在3类地址中常见到内网的IP段. 10.0.0.0--10.255.255.255 172.16.0.0--172.31.255.255 192.168.0.0--192.168.255.25 ...