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

ただし、背景として使用する画像の幅を常に「2 倍」にしたい場合は、現時点ではそれができないようです。

編集: 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

はい、スケーリングできますが、パーセンテージを使用してみてください。

background-size: 100%;

ただし、画面のさまざまな解像度を考慮する必要があります。4：3 4：9など

このjQueryスクリプトを使用することをお勧めします。jQueryStrechの背景

Answer 4

私はCSSが苦手です。しかし、アイデアだけです。タイル張りの背景を持つ背景 div を作成し (z-index を使用)、それをスケーリングします。それはうまくいくはずです