无纸化教育传媒 伴随着您成长 伴随着您进步
首页 > 下载 > 下载详文：CSS3的背景缩放background-size

CSS3的背景缩放background-size

发布时间：2014年12月06日 11时11分32秒   属性：程序Web开发 > Javascript/Html    访问次数：138091
字体：大 初始 小 简 繁 添加收藏 分享给好友

CSS 3.0的背景缩放background-size

在CSS 3.0中背景设置，不再像以前那样担心背景图片是否和元素完全匹配尺寸了，我们完全可以通过background-size来设置匹配元素的大小。以前如果背景图片小于容器在则会重复填充，现在通过background-size就不会了。

background-size：可以通过百分比也可以通过具体数值参数来设定，还可以通过contain和cover来设定。

下面通过示例来演示几种设定属性：

示例一： 通过background-size的百分比来设置背景（background-size:100% 100%），百分比形式显示背景色，背景图片随着窗口大body小改变图片拉伸匹配窗口。

HTML 代码  复制
<style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
            background: #000 url(453_54575_258638.jpg) center center fixed no-repeat;
            -moz-background-size: 100% 100%;
            background-size: 100% 100%;
        }
    </style>

效果如下：

示例二： background-size：cover，当设定为cover时，背景图片就会随着口大body小改变图片等比例匹配窗口大小。

HTML 代码  复制
<style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
            background: #000 url(453_54575_258638.jpg) center center fixed no-repeat;
            -moz-background-size: cover;
            background-size: cover;
        }
</style>

效果如下：

示例三：background-size: contain，当设定为contain时，背景图片不会满屏会随着口大body小改变图片等比例匹配窗口大小，它会有边距，默认是黑色。

HTML 代码  复制
<style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
            background: #000 url(453_54575_258638.jpg) center center fixed no-repeat;
            -moz-background-size: contain;
            background-size: contain;
            
        }
    </style>

效果如下：

示例四 ：在div中填充背景，根据div大小来匹配填充显示。

HTML 代码  复制
<head>
    <title>CSS3.0 background-size contain</title>
    <style type="text/css">
        .a
        {
            margin-top: 0px;
            width: 900px;
            height: 270px;
            background: #000 url(Tulips.png);
            background-position: 0px;
            -moz-background-size: contain;
            background-size: contain;
            border:1px solid #666;
        }
        .b
        {
            margin-top: 5px;
            width: 600px;
            height: 180px;
            background: #000 url(Tulips.png);
            background-position: 0px;
            -moz-background-size: contain;
            background-size: contain;
            border:1px solid #666;
        }
        .c
        {
            margin-top: 5px;
            width: 350px;
            height: 105px;
            background: #000 url(Tulips.png);
            background-position: 0px;
            -moz-background-size: contain;
           background-size: contain;
            border:1px solid #666;
        }
    </style>
</head>
<body>
    <div class="a">
    </div>
    <div class="b">
    </div>
    <div class="c">
    </div>
</body>

效果如下：

Mozilla关联参考：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Scaling_background_images。

免费
CSS3的背景缩放background-size （19）
本下载连接不支持第三下载工具打开，请直接点击下载即可
文章版权归属weisim3.com所有,未经书面版权许可同意，不得私自转载(或做修改转载)，源文件示例仅供学习使用，更不要出于商业用途或印刷出版发行！否则将追究其相关法律责任，版权联系QQ：729260499。
您可能感兴趣的软件资讯
最新世界软件资讯
×
遺昕 | Weisim3.com 下载许可条款 ( 您必须接受同意才可下载 ) .