我可以使用 CSS3 缩放背景吗？答案

【问题标题】：Can I scale a background using CSS3?我可以使用 CSS3 缩放背景吗？
【发布时间】：2012-08-03 06:38:03
【问题描述】：

更具体地说，是否可以使用 CSS3 的 transform:scale(x,y) 缩放平铺背景图像？

【问题讨论】：

【解决方案1】：

虽然你不能使用transform:scale()，但是如果你知道你需要的背景图片的最终尺寸，你可以使用background-size来获得同样的效果。

.selector {
    background-image: url(http://path/to/image.png);
    background-size: 200px 100px;
}

但是，如果您总是想将用作背景的图像的宽度“加倍”，那么目前这似乎是不可能的。

编辑：请注意，虽然 background-size 样式支持基于 % 的参数，但它不是图像大小的百分比，而是窗口大小。

【讨论】：

【解决方案2】：

你可以使用：

background-size: 200px;
background-size: 200px 100px;
background-size: 200px 100px, 400px 200px;
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover; 

 (or)

img.bg {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1024px;

    /* Set up proportionate scaling */
    width: 100%;
    height: auto;

    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
    img.bg {
        left: 50%;
        margin-left: -512px;   /* 50% */
    }
}



       (or)


    #bg {
        position:fixed; 
        top:0; 
        left:0; 

        /* Preserve aspet ratio */
        min-width:100%;
        min-height:100%;
    }

【讨论】：

【解决方案3】：

我不擅长 CSS。但只是这个想法：创建具有平铺背景的背景 div（使用 z-index）并对其进行缩放。它应该工作

【讨论】：

【解决方案4】：

是的，您可以对其进行缩放，但请尝试使用百分比。

background-size: 100%;

但是您需要考虑屏幕的不同分辨率。 4:3 4:9 等

我会推荐你使用这个 jQuery 脚本。 jQuery Strech Background

【讨论】：