2016-05-18 16 views
0

同じ画像に複数の線形グラデーションまたは不透明度が必要です。ここで1つの画像に複数のグラデーションがあります

は、私がこれまで持っているものです:enter image description here

HTML:

<body> 
    <div class="container"> 
     <div class="inner-container"> 
      <div class="left-section"></div> 
      <div class="right-section"></div> 
     </div> 
    </div> 


</body> 

はCSS:

*{ 
      margin: 0; 
      padding: 0; 
     } 
     body{ 
      background-color: #333; 
     } 
     .container{ 
      width: 1050px; 
      height: 750px; 
      background-image: 
       linear-gradient(
         rgba(0, 0, 0, 0.5), 
         rgba(0, 0, 0, 0.5) 
         ), 
       url(http://www.newyorker.com/wp-content/uploads/2015/12/Veix-Goodbye-New-York-Color-1200.jpg) 
      ; 
      margin: 0 auto; 
      -webkit-box-shadow: -2px 1px 37px 0px rgba(0,0,0,0.75); 
      -moz-box-shadow: -2px 1px 37px 0px rgba(0,0,0,0.75); 
      box-shadow: -2px 1px 37px 0px rgba(0,0,0,0.75); 
      margin-top: 50px; 
     } 
     .inner-container{ 
      width: 75%; 
      height: 75%; 
      border: 1px solid white; 
      margin: 0 auto; 
      margin-bottom: 50px; 
      border-radius: 5px; 
      background-image: 
       linear-gradient(
         rgba(0, 0, 0, 0), 
         rgba(0, 0, 0, 0) 
         ), 
       url(http://www.newyorker.com/wp-content/uploads/2015/12/Veix-Goodbye-New-York-Color-1200.jpg); 
     } 

CSSから、私は両方の容器で同じ画像を呼び出しています。しかし、イメージを外側と内側のコンテナの間で一致させないため、これを行うとレイアウトが奇妙に見えます。同じ画像を使って画像の効果を得るにはどうすればいいですか?

答えて

1

background-position: center topをコンテナと内側コンテナの両方に追加すると、それらは整列します。

+0

ありがとうございました!私は複数の画像で間違った軌道に乗っていると思ったが、背景位置を追加することは意味がある。 – Froy

+0

問題ありません:-) – haltersweb

関連する問題