css - 我可以使用 CSS3 缩放背景吗？

Question

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

Answer 1

虽然您不能使用 transform:scale()，但如果您知道所需背景图像的最终尺寸，则可以使用 background-size 来获得相同的效果。

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

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

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

Answer 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%;
    }

Answer 3

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

Answer 4

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

background-size: 100%;

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

我会推荐你​​使用这个 jQuery 脚本。jQuery 拉伸背景