html - 具有影响元素背景重复透明度的内边框

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 的有效值，您应该将其更改为 background-repeat: no-repeat。

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