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 ...
随机推荐
- Webpack 2 视频教程 016 - Webpack 2 中生成 SourceMaps
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- Ubuntu(Linux)下如何用源码文件安装软件
在Ubuntu中附带了丰富的软件,这些软件一般使用图形化的自动方式(“添加/删除”或“新立得”)即可轻松安装,但是对于那些刚刚问世的新软件,Ubuntu的源中还未收录其中,这时我们就需要用到一种更通用 ...
- 自定义类型转换器Convert
//自己指定一个类型转换器(将String转成Date) ConvertUtils.register(new Converter() { @Override public Object convert ...
- Head First设计模式之组合模式
一.定义 将对象组合成树形结构来表现"整体-部分"层次结构. 组合能让客户以一致的方法处理个别对象以及组合对象. 主要部分可以被一致对待问题. 在使用组合模式中需要注意一点也是组合 ...
- Fiddler中如何过滤会话、查询会话、保存回话、对比会话
1.Fiddler中如何过滤会话 在抓包时,会捕捉到很多的会话,但是我们只关心特定的接口会话,这个时候我们可以使用过滤功能,来帮助我们从一大堆会话中筛选去我们关心的会话 (1)勾选过滤器选项Filte ...
- SQL Server 禁用扩展存储过程
概述 扩展存储过程是 SQL Server 实例可以动态加载和运行的 DLL.扩展存储过程是使用 SQL Server 扩展存储过程 API 编写的,可直接在 SQL Server 实例的地址空间中运 ...
- JQuery.lazyload 图片延迟加载
1.引入 jquery.lazyload.js 2. 延时加载的方式 <script type="text/javascript"> $(function() { ...
- 关于OC中浮点型的计算
有时候不得不承认,细心观察生活中的细节,有时候会得到很多. 今天和公司朋友一起订了外卖,因为要分账,就突发奇想用代码来算出每个人花了多少钱.最后发现以前没有注意的细节或者不知道的知识,记录下. 我的代 ...
- 如何将VS 2015中的项目上传到github
最近开始慢慢接触github,现在希望将自己平时写的小程序,上传到github上,以便以后有个参考,在遇到同样问题的时候不至于想不起来怎么做而到处找别人的例子. VS 2015设置 首先下载跟gith ...
- Spring框架入门之基于xml文件配置bean详解
关于Spring中基于xml文件配置bean的详细总结(spring 4.1.0) 一.Spring中的依赖注入方式介绍 依赖注入有三种方式 属性注入 构造方法注入 工厂方法注入(很少使用,不推荐,本 ...