我想添加一个不透明的背景,在图像的前面有一个可见的文本。(例如,在图像中)就我而言,我使用flex来显示div元素,并尝试创建一个具有不透明性的背景以及文本每个分区 我知道我应该使用z-index来创建背景不透明层,但就我而言,我不知道为什么它不起作用。
main{
border: 2px solid red;
width: 100%;
height: 100vh;
}
.projects-wrapper{
border: 2px solid black;
width: 100%;
height: 50vh;
display: flex;
}
.projects-wrapper div{
border: 2px solid green;
flex-grow: 1;
}
/* .projects-wrapper div.text-description{
border: 2px solid yellow;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
color: white;
text-transform: uppercase;
}
.projects-wrapper div.text-description span{
display: block;
} */
.first-row div:first-child{
background-image: url(../assets/concert-hall.jpg);
background-size: cover;
background-position: center;
}
.first-row div:nth-child(2){
background-image: url(../assets/bedroom-2.jpg);
background-size: cover;
background-position: center;
}
.first-row div:last-child{
background-image: url(../assets/hotel.jpg);
background-size: cover;
background-position: center;
}
<main>
<div class="projects-wrapper first-row">
<div class="image-wrapper">
<!-- <div class="text-description">
Concert hall <span>in New York</span>
</div>
<div class="text-category">
Architecture
</div> -->
</div>
<div class="image-wpapper">
<!-- <div class="text-description">
Modern bedroom <span>in Gorizia</span>
</div>
<div class="text-category">
Interior
</div> -->
</div>
<div class="image-wpapper">
<!-- <div class="text-description">
Modern hotel <span>in London</span>
</div>
<div class="text-category">
Architecture
</div> -->
</div>
</div>
<main>
您能检查下面的代码吗?希望它对您有用。我们在类中image-wrapper
使用:: after(pseudo-element)给出了叠加背景。我们也将text-description和text-category封装到div中,description
并赋予其相对位置,z-index和颜色。我们通过将背景图片分配给直接子div来修改您的样式。例如
.first-row div:first-child {
background-image: url();
}
至
.first-row > div:first-child {
background-image: url();
}
请参考此链接:https : //jsfiddle.net/yudizsolutions/mt4zpa8q/
main {
border: 2px solid red;
width: 100%;
height: 100vh;
}
.projects-wrapper {
border: 2px solid black;
width: 100%;
height: 50vh;
display: flex;
}
.projects-wrapper div {
flex-grow: 1;
}
.first-row>div:first-child {
background-image: url(https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/bedroom-ideas-rds-work-queens-road-08-1593114639.jpg);
background-size: cover;
background-position: center;
}
.first-row>div:nth-child(2) {
background-image: url(https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/bedroom-ideas-rds-work-queens-road-08-1593114639.jpg);
background-size: cover;
background-position: center;
}
.first-row>div:last-child {
background-image: url(https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/bedroom-ideas-rds-work-queens-road-08-1593114639.jpg);
background-size: cover;
background-position: center;
}
.image-wrapper {
position: relative;
}
.image-wrapper:after {
height: 100%;
width: 100%;
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
background: rgba(0, 0, 0, 0.5);
}
.description {
padding: 10px;
position: relative;
z-index: 1;
color: #fff;
}
.text-description {
margin: 10px 0px;
}
<main>
<div class="projects-wrapper first-row">
<div class="image-wrapper">
<div class="description">
<div class="text-description">
Concert hall <span>in New York</span>
</div>
<div class="text-category">
Architecture
</div>
</div>
</div>
<div class="image-wrapper">
<div class="description">
<div class="text-description">
Modern bedroom <span>in Gorizia</span>
</div>
<div class="text-category">
Interior
</div>
</div>
</div>
<div class="image-wrapper">
<div class="description">
<div class="text-description">
Modern hotel <span>in London</span>
</div>
<div class="text-category">
Architecture
</div>
</div>
</div>
</div>
<main>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句