DIVの辺をbgの色で塗りつぶします

divの両端を（全面divの子である）背景画像で塗りつぶしています。DIVの辺をbgの色で塗りつぶします

したがって、上記画像上の青色の背景画像であり、Iはbackgroung画像のtranparencyを覆うことなく、側面に「ギャップ」を埋める色に必要。どのようにCSSでそれを達成するには？ HERESに

<div id="footer-decoration" aria-hidden="true"> 
    <div class="container"></div> 
</div>

そして、私の現在のCSS/Sassのである：私は道で、ブートストラップ3を使用してい

#footer-decoration { 
    margin-top: $grid-gutter-width; 

    >.container { 
     background: url('../img/bg-footer-top.png') center center; 
     background-color: transparent; 
     height: 50px; 
    } 
}

は、ここに私のHTMLです。

ありがとうございました！

出典

2017-03-24 Ricardo Moro

あなたはそれを理解するために私たちを助けることができるようにあなたが達成したいものを一枚の画像を作成します。 – Nimmi

コンテナの:beforeと:after疑似要素に背景色を適用して、面を塗りつぶすことができます。

body { 
 
    background: url('//i.imgur.com/7QboUH0.png') repeat; 
 
} 
 

 
#footer-decoration > .container { 
 
    background: url('//i.imgur.com/LVKQVf1.png') no-repeat; 
 
    height: 55px; 
 
    position: relative; 
 
} 
 

 
#footer-decoration > .container:after, #footer-decoration > .container:before { 
 
    content: ''; 
 
    position: absolute; 
 
    display: block; 
 
    height: 100%; 
 
    background: #fff; 
 
} 
 
#footer-decoration > .container:after { 
 
    left: -100%; 
 
    right: 100%; 
 
} 
 

 
#footer-decoration > .container:before { 
 
    right: -100%; 
 
    left: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 
    <div id="footer-decoration"> 
 
    <div class="container"></div> 
 
    </div> 
 
</body>

出典

2017-03-24 20:18:27

DIVの辺をbgの色で塗りつぶします

答えて

関連する問題