background-image背景图片怎么用css缩小

html-css030

background-image背景图片怎么用css缩小,第1张

css3里支持背景图缩放，用background-size

属性，但是这个属性目前只有firfox

chrome

safari

opera

ie9+浏览器支持

如果想更全面的支持，可以不要做背景

用<img

/>

限定width、height，指定position:absolute和left、top位置，z-index设为-1

不知道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 值就可以实现边框不动，颜色变动。

背景图片CSS3缩放是可以的，但是不兼容。图片是可以缩放的，你定义他的一个宽度或者一个高度，就会按照这个尺寸等比例缩放，你也可以同事定义他的宽度和高度，但是比例把握不好会变形的格式：<img src="11.png" width=“数字" height="数字">