CSS3 background-size 自定义背景图片的大小

admin · 发表于 2013-7-19 19:36:10

CSS3 background-size 属性

background-size 属性规定背景图片的尺寸。

在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。

您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
例子 1

调整背景图片的大小：
简单示例：
div

{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}

复制代码

完整示例：

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url(/i/bg_flower.gif);
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>
<body>
<p>上面是缩小的背景图片。</p>
<p>原始图片：<img src="/i/bg_flower.gif" alt="Flowers"></p>
</body>
</html>

复制代码

预览效果：

admin · 发表于 2013-7-19 19:39:34

<!DOCTYPE html>
<html>
<head>
<style>
div
{
background:url(/i/bg_flower.gif);
background-size:35% 100%;
-moz-background-size:35% 100%; /* 老版本的 Firefox */
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div>
<p>这是一对背景拉升的例子。</p>
<p>这是一对背景拉升的例子。</p>
<p>这是一对背景拉升的例子。</p>
<p>这是一对背景拉升的例子。</p>
<p>这是一对背景拉升的例子。</p>
<p>这是一对背景拉升的例子。</p>
<p>这是一对背景拉升的例子。</p>
<p>这是一对背景拉升的例子。</p>
<p>这是一对背景拉升的例子。</p>
</div>
</body>
</html>
<img src="http://bbs.phonegap100.com/forum.php?mod=image&aid=20&size=300x300&key=49e50d20f43a691c&nocache=yes&type=fixnone" aid="attachimg_20" alt="" border="0">