请选择 进入手机版 | 继续访问电脑版

每天都有无数事情发生,每天都曾在游戏历史上留下记录。游戏史上的今天,带你每天回顾这个日子的历史事件,回味经典诞生的瞬间。

酷站网 首页 站长学院 Web前端

CSS3的Background-size很重要

2017-7-20 23:36 33 0
简介
如果问是什么让所有男人都生活中恐惧中,回答是不确定。没有人表露,但好奇会害死猫。十个女人中会有九个同意这点。广告商想尽办法让我们觉得不足够,但会告诉我们还可以改进。没错,先生们….size很重要。我说的是b ...
如果问是什么让所有男人都生活中恐惧中,回答是不确定。没有人表露,但好奇会害死猫。十个女人中会有九个同意这点。广告商想尽办法让我们觉得不足够,但会告诉我们还可以改进。没错,先生们….size很重要。
我说的是background-size。CSS里的background-size属性能够让程序员决定如何在指定的元素里展示。MooTools程序员Christoph Pojer在他的网站上运用了background-size技术,使得在浏览器上他的头像始终“全面覆盖”在页头上——甚至是在手机上。下面让我们来看看神奇的background-size属性是如何使用的。
background-size CSS属性
这个background-size属性有几个预定义的值,但也可以像其它size属性一样使用数字:
contain: 包含,整个背景图都要被包含在元素内,没有超出的部分。
cover: 覆盖,背景要覆盖元素的所有区域,不能有空白出现。
长度/百分比: 数字值
不管你相信与否,这最有趣的部分是当它的值为长度和百分比的时候。下面用几个例子演示一下 background-size的几种不同用法:

/* base header classes */
#header {
	/* header dimension! */
	height: 350px;

	/* additional background properties */
	background-repeat: no-repeat;
	background-position: center center;

	/* some box shadow for good fun */
	-webkit-box-shadow: rgba(0,0,0,0.20) 0 10px 10px;
	-moz-box-shadow: rgba(0,0,0,0.20) 0 10px 10px;
	box-shadow: rgba(0,0,0,0.20) 0 10px 10px;
}

/* 覆盖 cover */
#header.flex {
	/* size matters */
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
}

/* 包含 contain */
#header.flex {
	/* size matters */
	-webkit-background-size: contain;
	-moz-background-size: contain;
	background-size: contain;
}

/* flex, fun */
#header.flex {
	/* size matters */
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
	background-size: 100% auto;
}


Christoph在其网站上使用了最后一个例子。想看看各种值下的效果,请看看下面的演示,它是用JavaScript做成的,可以有交互动作:

background-size神奇之处就在于它的自我调整能力。我以前常常担心当浏览器窗口发生变化,当有resize事件发生时,页面会出现不可预测的变化。但background-size却能根据客户端浏览器的大小自我的调整适应。background-size在火狐浏览器, Safari浏览器, 谷歌浏览器, Opera, 和 IE9+ 中都受支持。

你觉得这种技术有价值吗?会使用在你的页面上吗?


鲜花

握手

雷人

路过

鸡蛋
精彩阅读 更多
广告位

400-888-8888

周一至周五 9:30-18:00

北京市大兴区景园北街2号02号

  • 扫一扫 手机访问

Archiver-手机版-小黑屋- 酷站网.  

Powered by Discuz!X3.3© 2012-2018 Comsenz Inc. 版权所有