web-dev-qa-db-ja.com

背景画像：画像が小さい場合にdiv全体を塗りつぶす方法、およびその逆

私には3つの問題があります：

  1. 小さいサイズのdivで背景画像を使用しようとすると、divには画像の一部しか表示されません。画像の全体または特定の部分を表示するにはどうすればよいですか？

  2. 小さい画像があり、大きいdivで使用したいです。しかし、繰り返し機能を使用したくない。

  3. CSSで画像の不透明度を操作する方法はありますか？

cssbackground-imageopacity
68
Aakash Sahai

Divサイズに合うように画像のサイズを変更します。
CSS3を使用すると、次のことができます。

/* with CSS 3 */
#yourdiv {  
    background: url('bgimage.jpg') no-repeat;
    background-size: 100%;
}

Webページで背景画像をどのように拡大しますか ：

不透明度について

#yourdiv {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

または CSS Image Opacity/Transparency をご覧ください

112
yossi

画像を自動的に拡大し、divセクションの一部を塗りつぶさずにカバーするには、次を使用します。

background-size: cover;
67
Ouadie

これは私にとって完璧に働いた

background-repeat: no-repeat;
background-size: 100% 100%;
16
Dnyaneshwar Harer

以下のコードセグメントを試してください、私は前に自分で試しました：

#your-div {
    background: url("your-image-link") no-repeat;
    background-size: cover;
    background-clip: border-box;
}
9
Behnia Esmailian

background-size:100%;を与えるのではなく
background-size:contain;を提供できます
利用可能なさまざまなオプションについてはこちらをご覧ください： http://www.css3.info/preview/background-size/

8
vivekj011

これは魅力のように機能します。

background-image:url("http://assets.toptal.io/uploads/blog/category/logo/4/php.png");
background-repeat: no-repeat;
background-size: contain;
4
Jayanta Biswas

  1. Yossiの例に同意します。divに合わせて画像を拡大しますが、少し異なる方法で（css 2.1では少し柔軟性がないため、背景画像なしで）。画像全体を表示：

    <div id="yourdiv">
    <img id="theimage" src="image.jpg" alt="" />
</div>

#yourdiv img {
    width:100%;
  /*height will be automatic to remain aspect ratio*/
}

  2. Background-positionを使用して画像の一部を表示します。

    #yourdiv 
{
    background-image: url(image.jpg);
    background-repeat: no-repeat;
    background-position: 10px 25px;
}

  3. （1）の最初の部分と同じで、画像はdivに拡大縮小されるため、大きくても小さくても機能します

  4. ヨッシーと同じ。

0
Bazzz