バックグラウンドサイズのカバー/センターが機能しない

background-size: coverとbackground-size: containを使用して背景イメージをdivに合わせたいと思っていますが、動作しません。私は、これはコードで、HTMLタグ内に背景画像を表示し、CSSファイルでバックグラウンド・サイズを使用する必要があります。バックグラウンドサイズのカバー/センターが機能しない

.container { 
 
    width: 200px; 
 
    height: 260px; 
 
    position: relative; 
 
    margin: 0 auto 40px; 
 
    margin-left: 20px; 
 
    display: inline-block; 
 
} 
 
.main{ 
 
    border: 1px solid black; 
 
    background-color: #A6A6A6; 
 
} 
 
.card { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    border: 2px solid white; 
 
} 
 
.card div { 
 
    height: 100%; 
 
    width: 100%; 
 
    color: white; 
 
    text-align: center; 
 
    position: absolute; 
 
} 
 
.card .front { 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: contain; 
 
    -webkit-background-size: contain; 
 
    -moz-background-size: contain; 
 
    -o-background-size: contain; 
 
}

<body style="background-image:url(https://s3.amazonaws.com/Syntaxxx/background-gold-bokeh.jpg);"> 
 
<div class="main"> 
 
    <section class="container"> 
 
     <div class="card"> 
 
      <div class="front" style="background-image: url('http://www.mobygames.com/images/covers/l/403626-injustice-2-playstation-4-front-cover.png');"> 
 
      </div> 
 
      <div class="back">1</div> 
 
     </div> 
 
    </section> 
 
    <section class="container"> 
 
     <div class="card"> 
 
      <div class="front" style="background-image: url('http://www.mobygames.com/images/covers/l/403651-the-surge-playstation-4-front-cover.jpg');"> 
 
      </div> 
 
      <div class="back">2</div> 
 
     </div> 
 
    </section> 
 
</div> 
 
      
 
</body>

出典

2017-11-16 SilverSurfer

は'バックグラウンドポジションを追加.front'：センターセンター; 'あなたは何を意味するのかである希望を、そうでない場合、私はより多くの情報が必要になります:) – Gezzasa

'背景位置：センターセンター; '修正をあなたの問題。 – connexo

あなた.card .frontはあなたがあまりにも多くの性質を与えてくれたbackground-repeatのスタイルを持っています。

CSS、あなたはその後、YをXを使用する他のほとんどの寸法でbackground-position

.card .front { 
    background-position: center center; 
    background-repeat: no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

に与えられるcenter centerニーズは、Z（離れてZ-インデックスからノーZ）

背景サイズが拡大されますdiv全体が完全になるまでの画像。

あなたが探しているのはbackground-size: containです。これにより、任意のコンテナにフルイメージが表示されます。あなたはbackground-position: center;を指定する必要があり、それは簡単な修正であるcenter center

.card .front { 
    background-image: url(https://s3.amazonaws.com/Syntaxxx/background-gold-bokeh.jpg); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: contain; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain; 
}

出典

2017-11-16 08:04:02 Gezzasa

バックグラウンドポジションにセンター1を入れてセンター2を置くことの違いは何ですか？ – SilverSurfer

1つのセンターは水平用で、もう1つは垂直整列用です。 1つのセンターのみを書き込むと、水平方向と垂直方向に追加されます – Sylwek

しかし、画像はまだ表示されているより少し大きいです、なぜですか？私は切断せずに完全な画像を表示する必要があります – SilverSurfer

私はあなたによく理解してかどうかわからないんだけど、持っていますあなたはバックグラウンドポジションを試みました：50％; ？

.container { 
 
    width: 200px; 
 
    height: 260px; 
 
    position: relative; 
 
    margin: 0 auto 40px; 
 
    margin-left: 20px; 
 
    display: inline-block; 
 
} 
 
.main{ 
 
    border: 1px solid black; 
 
    background-color: #A6A6A6; 
 
} 
 
.card { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
} 
 
.card div { 
 
    height: 100%; 
 
    width: 100%; 
 
    color: white; 
 
    text-align: center; 
 
    position: absolute; 
 
} 
 
.card .front { 
 
    background-repeat: no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    background-position: 50%; 
 
}

<body style="background-image:url(https://s3.amazonaws.com/Syntaxxx/background-gold-bokeh.jpg);"> 
 
<div class="main"> 
 
    <section class="container"> 
 
     <div class="card"> 
 
      <div class="front" style="background-image: url('http://www.mobygames.com/images/covers/l/403626-injustice-2-playstation-4-front-cover.png');"> 
 
      </div> 
 
      <div class="back">1</div> 
 
     </div> 
 
    </section> 
 
    <section class="container"> 
 
     <div class="card"> 
 
      <div class="front" style="background-image: url('http://www.mobygames.com/images/covers/l/403651-the-surge-playstation-4-front-cover.jpg');"> 
 
      </div> 
 
      <div class="back">2</div> 
 
     </div> 
 
    </section> 
 
</div> 
 
      
 
</body>

出典

2017-11-16 08:01:34 Sylwek

追加します。これは、あなたの背景画像の中心を確実にします。 .card `上

.card .front { 
    background-position: center; 
｝

出典

2017-11-16 08:05:53 Vincent1989

私はバックグラウンド位置に1センターと2センターの違いは何ですか？ – SilverSurfer

これは単なる '背景位置：x y;'です。最初の値はx位置の位置になり、2番目の値はy位置になります。最初に提供された値のみがxとyの両方の位置に適用されます。 – Vincent1989

しかし、画像はまだ表示されているよりも少し大きいです、なぜですか？私はカットなしでフルイメージを見る必要があります。 – SilverSurfer

バックグラウンドサイズのカバー/センターが機能しない

答えて

関連する問題