css background-size 属性_html/css_WEB-ITnose-html教程-PHP中文网

css background-size 属性_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:50:53

原创

1461人浏览过

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

语法
background-size: length|percentage|cover|contain;
length 设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。

percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

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

立即学习“前端免费学习笔记（深入）”；

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

IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。

例子1：

<!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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/js/5056">
                            <img src="https://img.php.cn/upload/jscode/000/120/096/5dc3a880e4bd6537.jpg" alt="解决IE下不支持placeholder属性">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/js/5056">解决IE下不支持placeholder属性</a>
                            <p></p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="解决IE下不支持placeholder属性">
                                <span>30</span>
                            </div>
                        </div>
                        <a href="/xiazai/js/5056" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="解决IE下不支持placeholder属性">
                        </a>
                    </div>
                <p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p></div></body></html>

登录后复制

例子2：

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

登录后复制