コンテナー CSS で 100% を使用しているときに問題に直面しています。ここに、右側の画像に示されている RED の背景色が見える画像を同封します。
ここに、すべての CSS コード jsfiddle リンクを示します。すべての角度の背景 (赤、黄、緑) が表示されないように、どの CSS を変更する必要があるかを確認して教えてください。
別の ID で指定した幅の合計も 100% を超えています (左に 39%、中央に 50%、右に 34%)、合計で 123% です。私はそれが間違っていることを知っていますが、そのデザインを修正する他の方法を見つけることができませんでした.
私のコンピューターの画面解像度は 1600 から 900 で、これらの CSS を実装した後、正しい画像に赤の背景しか表示されません。しかし、小さい画面では、リンクでわかるように、他のすべての背景画像が表示されます。
HTML
<div id="container">
<div id="left"><img src="http://media-cdn.tripadvisor.com/media/photo-s/03/c3/1f/5f/working-people-exhibit.jpg"/></div>
<div id="middle"><img src="http://global.fncstatic.com/static/managed/img/Health/Women%20Working.jpg"/></div>
<div id="right"><img src="http://www.koindo.com/images/WORKING%20PEOPLE%20IMAGE.jpg"/></div>
</div>
CSS
#container{
width:100%;
background-color:orange;
height:300px;
overflow:hidden;
position:relative;
}
#left{
position:absolute;
left:-4%;
display:inline-block;
width:39%;
background-color:red;
height:300px;
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg); /* IE 9 */
-webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
z-index:1;
overflow:hidden;
}
#left img{
transform:skew(20deg,0deg);
-ms-transform:skew(20deg,0deg); /* IE 9 */
-webkit-transform:skew(20deg,0deg); /* Safari and Chrome**/
width:100%;
height:100%;
}
#middle{
position:absolute;
margin-left:30%;
display:inline-block;
width:50%;
background-color:green;
height:300px;
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg); /* IE 9 */
-webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
z-index:2;
border-left:10px solid white;
overflow:hidden;
}
#middle img{
transform:skew(20deg,0deg);
-ms-transform:skew(20deg,0deg); /* IE 9 */
-webkit-transform:skew(20deg,0deg); /* Safari and Chrome**/
margin-left:-11%;
width:100%;
height:100%;
}
#right{
position:absolute;
right:-4%;
display:inline-block;
width:34%;
background-color:red;
height:300px;
border-left:10px solid white;
transform:skew(-20deg,0deg);
-ms-transform:skew(-20deg,0deg); /* IE 9 */
-webkit-transform:skew(-20deg,0deg); /* Safari and Chrome */
z-index:3;
overflow:hidden;
}
#right img{
transform:skew(20deg,0deg);
-ms-transform:skew(20deg,0deg); /* IE 9 */
-webkit-transform:skew(20deg,0deg); /* Safari and Chrome**/
width:100%;
height:100%;
}
(JSFiddle: http://jsfiddle.net/swati712/XQNzu/5/ )