demopu教你学习css3,css3中的Background-size

demopu教你学习css3,css3中的Background-size

来自:http://www.demopu.com/doc/css3/background-size.shtml

版本:CSS3

 

继承性:无

语法:

background-size :[ <length> | <percentage> | auto ]{1,2} | cover | contain

相关属性: background-clip | background-origin


取值:

  • <length>

  • 由浮点数字和单位标识符组成的长度值。不可为负值。

  • <percentage>

  • 取值为0%到100%之间的值。不可为负值。


设置背景图片的大小。

指定背景大小,以象素或百分比显示。当指定为百分比时,大小会由所在区域的宽度、高度,以及background-origin的位置决定。还可以通过cover和contain来对图片进行伸缩

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Background-size</title>

</head>

<body>

<div style="border: 1px solid #CCCCCC; padding:90px 5px 10px; background:url(http://webteam.tencent.com/wp-content/themes/teamblog/img/gg.png) no-repeat ; -webkit-background-size: 100% 80px; -o-background-size: 100% 80px; ">这里的 <code>background-size: 100% 80px</code>。 背景图片将与DIV一样宽,高为80px。</div>

</body>

</html>


转载于:https://my.oschina.net/u/2360526/blog/415176

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值