所以我有一个背景图片,我需要在这个背景图片上放一个水平的白色条带,以便将标题放入条带中。我知道如何在CSS上的图像上制作盒子但是我很难制作这个条带,它不能是一个盒子,它必须覆盖从左边缘到右边缘的整个背景图像。图片,任何想法?
以下是涉及的代码:
.title-image {
position: fixed;
height: 230px;
margin-top: -16px;
margin-left: -20px;
}
h1 {
background: white;
position: absolute;
font-family: Play;
color: #c76161;
}

<div class="title">
<img class="title-image" src="" alt="">
<h1>Title</h1>
</div>
&#13;
答案 0 :(得分:4)
您可以简单地使用多个这样的背景:
<div class="box">
some text
</div>
&#13;
awk
&#13;
答案 1 :(得分:-3)
使用flexboxes和背景图片
body{
margin: 0;
padding: 0;
}
.image{
width: 250px;
height: 250px;
background-color: red;
display: flex;
align-items: center;
}
.title_container{
width: 250px;
background-color: green;
text-align: center;
}
<div class="image"><div class="title_container"><h1 class="title">Test</h1></div></div>
替换背景颜色:红色; by background-image:url(“yourimage.png”);