• 技术文章 >web前端 >前端问答

    css background-size属性怎么用

    藏色散人藏色散人2019-05-29 10:47:29原创1934
    css background-size属性可以设置背景图片的大小。语法:background-size: length|percentage|cover|contain;通过长度值或百分比来设置图片大小,或者通过cover和contain来对图片进行伸缩设置。

    css background-size属性怎么用?

    作用:规定背景图像的尺寸。

    语法:

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

    说明:

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

    第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

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

    css background-size属性使用示例

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    body
    {
    background:url('https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg');
    background-size:100px 63px;
    -moz-background-size:100px 63px; /* 老版本的 Firefox */
    background-repeat:no-repeat;
    padding-top:80px;
    }
    </style>
    </head>
    <body>
    <p>上面是缩小的背景图片。</p>
    <p>原始图片:<img src="https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg" alt="Flowers"></p>
    </body>
    </html>

    效果输出:

    d57808d57d6bcc6dde49de711c5260c.png

    以上就是css background-size属性怎么用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css background-size
    上一篇:css background-origin属性怎么用 下一篇:css border-bottom-color属性怎么用?
    PHP编程就业班

    相关文章推荐

    • css column-rule属性怎么用• css border-bottom-color属性怎么用• css column-rule-color属性怎么用• css background-origin属性怎么用

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网