内部边界与透明度影响元素背景重复

Question

我有一个带背景图片的元素。在元素的顶部和底部，我想要一个半透明的条形图，其下方显示图像。这是问题的图像：

---

这是我的标记：

<div class="section-header art">
    <h1>Art</h1>
</div>

这是我的样式（SASS，旧语法）

.section-header.art
    background-image: url(../../img/interpretations__art.bmp)
    background-size: cover
    background-repeat: none
    padding: 5em 0
    box-sizing: border-box
    border-top: 5em solid rgba(255,255,255,0.2)
    border-bottom: 5em solid rgba(255,255,255,0.2)
    h1
        font-size: 4em
        font-family: $type__head
        font-weight: bold
        text-transform: uppercase
        letter-spacing: .4em
        text-align: center
        color: rgba(255,255,255,0.5)

---

万一你没有注意到这个问题，图像在上边框重复，这不是理想的效果。

提前感谢您提供的任何帮助！

Answer 1

background-repeat: none它不是背景重复的有效值，您应将其更改为background-repeat: no-repeat。

更新：您可以通过添加background-position: 0 -5em;来解决此问题，请参阅此处的示例：http://sassmeister.com/gist/37d7b2d8a71aa8c879a0