用 bg 颜色填充 DIV 侧面

我正在尝试填充全角div 子级的div(带有背景图像(的两侧。

需要颜色填充的图像背景

因此，上图上的蓝色是背景图像，我需要用颜色填充侧面的"间隙"，而不会覆盖背景图像的透明度。如何使用CSS实现这一点？

这是我的 HTML：

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

这是我目前的 CSS/Sass：

#footer-decoration {
    margin-top: $grid-gutter-width;
    >.container {
        background: url('../img/bg-footer-top.png') center center;
        background-color: transparent;
        height: 50px;
    }
}

顺便说一下，我正在使用Bootstrap 3。

感谢任何帮助的人！

您可以通过将

背景色应用于容器的: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>

相关内容

最新更新

热门标签：