加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > Web前端 > css3基础

CSS background-size 属性 详解

css3基础 2022-07-14 15:55:44小码哥的IT人生shichen

CSS background-size 属性

定义和用法

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

另请参阅：

CSS 教程：CSS 背景、CSS 背景（高级）

HTML DOM 参考手册：backgroundSize 属性

实例

规定背景图像的尺寸：

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

CSS 语法

background-size: length|percentage|cover|contain;

属性值

值 描述 测试
length

设置背景图像的高度和宽度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

 测试
percentage

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

 测试
cover

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

 测试
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 测试

技术细节

默认值： auto
继承性： no
版本： CSS3
JavaScript 语法： object.style.backgroundSize="60px 80px"

更多实例

完整实例【拉伸背景图像】：

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

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

拉伸背景图像来完全覆盖内容区域。

完整实例【拉伸背景图像，对背景图像水平复制四次】：

<!DOCTYPE html>
<html>
<head>
<style>
div
{
background:url(/i/bg_flower.gif);
background-size:25%;
border:2px solid #92b901;
}
</style>
</head>
<body>
<div>
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

对背景图像进行拉伸，以使背景图像恰好水平复制四次。

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
4.0
1.0 -webkit-		 9.0 4.0
3.6 -moz-		 4.1
3.0 -webkit-		 10.5
10.0 -o-

完整实例1：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
background-image:url('/i/eg_smile.gif');
background-repeat:no-repeat;
background-size:100px 100px;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>background-size:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="100px 100px" checked="checked" />100px 100px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="75px 75px" />75px 75px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="10px 150px" />10px 150px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="200px" />200px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="50%" />50%</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="100% 100%" />100% 100%</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="cover" />cover</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="contain" />contain</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
background-image:url('/i/eg_smile.gif');
background-repeat:no-repeat;
background-size:<span id="CodeValue">100px 100px</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.backgroundSize=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例2：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
background-image:url('/i/eg_smile.gif');
background-repeat:no-repeat;
background-size:100px 100px;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>background-size:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="50%" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="100px 100px" />100px 100px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="75px 75px" />75px 75px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="10px 150px" />10px 150px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="200px" />200px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="50%" />50%</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="100% 100%" />100% 100%</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="cover" />cover</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="contain" />contain</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
background-image:url('/i/eg_smile.gif');
background-repeat:no-repeat;
background-size:<span id="CodeValue">100px 100px</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.backgroundSize=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例3：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
background-image:url('/i/eg_smile.gif');
background-repeat:no-repeat;
background-size:100px 100px;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>background-size:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="cover" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="100px 100px" />100px 100px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="75px 75px" />75px 75px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="10px 150px" />10px 150px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="200px" />200px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="50%" />50%</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="100% 100%" />100% 100%</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="cover" />cover</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="contain" />contain</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
background-image:url('/i/eg_smile.gif');
background-repeat:no-repeat;
background-size:<span id="CodeValue">100px 100px</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.backgroundSize=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例4：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#DemoArea
{
background-image:url('/i/eg_smile.gif');
background-repeat:no-repeat;
background-size:100px 100px;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>background-size:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="contain" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="100px 100px" />100px 100px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="75px 75px" />75px 75px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="10px 150px" />10px 150px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="200px" />200px</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="50%" />50%</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="100% 100%" />100% 100%</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="cover" />cover</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="contain" />contain</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#DemoArea
{
background-image:url('/i/eg_smile.gif');
background-repeat:no-repeat;
background-size:<span id="CodeValue">100px 100px</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="DemoArea"
document.getElementById(strId).style.backgroundSize=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024