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

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

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">

admin 发表于 2013-9-27 15:48:15

好好 学习了 确实不错

phonegap100 发表于 2013-9-28 07:38:46

有竞争才有进步嘛

admin 发表于 2013-9-30 02:14:32

不知该说些什么。。。。。。就是谢谢

phonegap100 发表于 2013-10-1 02:57:50

这是什么东东啊
页: [1]
查看完整版本: CSS3 background-size 自定义背景图片的大小