标签定义及使用说明background-size属性指定背景图片大小。 默认值: | auto | 继承: | no | 版本: | CSS3 | JavaScript 语法: | object object.style.backgroundSize="60px 80px" |
语法background-size: length|percentage|cover|contain; 值说明 值 | 描述 | length | 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动) | percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)" | cover | 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 | contain | 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
实例代码<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>background-size 属性</title>
<!--定义内部样式-->
<style>
body{
background:url(flower.jpg);/*背景图片*/
background-size:50px 50px;/*指定背景图像的大小*/
background-repeat:no-repeat;/*背景不重复*/
padding-top:40px;/*距离顶部距离*/
}
</style>
</head>
<body>
<p>
Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
</p>
<p>原始图片: <img src="flower.jpg" alt="Flowers" ></p>
</body>
</html>效果图小白教程网www.2d5.net 
|
