Question

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

Answer 1

虽然您无法使用transform：scale（），但如果您知道所需背景图像的最终大小，则可以使用背景大小来获得相同的效果。

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

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

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

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 Strech Background

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

4 个答案: