我有一个带有背景图片的元素。在元素的顶部和底部,我想要一个半透明的条,下面显示图像。这是问题的图片:
这是我的标记:
<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)
以防万一您没有注意到这个问题,图像在上边框重复出现,这不是预期的效果。
在此先感谢您提供的任何帮助!
最佳答案
background-repeat: none
这不是 background-repeat 的有效值,您应该将其更改为 background-repeat: no-repeat
。
更新:您可以通过添加 background-position: 0 -5em;
来解决此问题,请在此处查看示例:http://sassmeister.com/gist/37d7b2d8a71aa8c879a0
关于html - 具有影响元素背景重复透明度的内边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25227370/