css3中background-size中的cover与contain的区别

html-css019

css3中background-size中的cover与contain的区别,第1张

background-size中的cover与contain都是将图片以相同的宽高比缩放以适应容易的宽高，不同的是cover会缩放至图片能够铺满整个容易，可能会有部分图片区域被裁剪，而contain则是图片会缩放至整个图片都能显示完全，但是容易可能会有留白。

不知道CSS3 的 background-clip 属性是否能满足你的需求。这个属性可以规定背景的绘制区域，代码如下 ：

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <style>

            .rect {

                width:120px

                height:120px

                border:1px solid #999

                padding:5px

                background-color:green

                background-clip:content-box

            }

        </style>

    </head>

    <body>

        <div class="rect"></div> 

    </body>

</html>

结果如下：

将 background-clip 属性值设置为 content-box 将背景内容裁剪到内容框，这样只要改变 padding 值就可以实现边框不动，颜色变动。