0
同じ画像に複数の線形グラデーションまたは不透明度が必要です。ここで1つの画像に複数のグラデーションがあります
は、私がこれまで持っているものです：
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から、私は両方の容器で同じ画像を呼び出しています。しかし、イメージを外側と内側のコンテナの間で一致させないため、これを行うとレイアウトが奇妙に見えます。同じ画像を使って画像の効果を得るにはどうすればいいですか？
ありがとうございました！私は複数の画像で間違った軌道に乗っていると思ったが、背景位置を追加することは意味がある。 – Froy
問題ありません:-) – haltersweb