位置:电子教程 > CSS3教程 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS3基础样式
CSS3 高级样式
当前阅读教程:CSS3教程 > background-size 属性
阅读(22555525)      收藏       赞(5685)      分享
上一篇: background-origin 属性 下一篇: CSS3 文本效果

标签定义及使用说明

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

image.png




上一篇: background-origin 属性 下一篇: CSS3 文本效果
毕业设计网             广告联系QQ:45157718(微信同号)