在 https://www.artisanbelle.com我的推荐书旁边显示有照片和文字(中途向下滚动)。我希望灰色背景只出现在文字上。我尝试这样做,将它添加到文本 div,但它没有用。所以我将它添加到也包含图像的容器 div (pic-testimonial) 中,但现在它出现在图像周围,我根本不希望它出现在图像之外。我不确定如何解决这个问题。
.testimonial-container {
width: 80%;
border: none;
margin: auto;
}
/* For mobile */
.testimonial-imga,
.testimonial-imgb,
.testimonial-texta,
.testimonial-textb {
width: 100%;
}
.testimonial-imga,
.testimonial-imgb {
float: left;
}
.testimonial-texta,
.testimonial-textb {
float: left;
padding: 15px;
width: 100%;
text-align: center;
font-size: 1.3em;
}
.pic-testimonial::after {
content: "";
clear: both;
display: table;
}
.testimonial-photo {
max-width: 100%;
height: 451px;
}
@media only screen and (min-width: 768px) {
/* for desktop */
.pic-testimonial {
background-color: #DFE3E6;
overflow: auto;
margin-bottom: 30px;
}
.testimonial-imga,
.testimonial-texta,
.testimonial-imgb,
.testimonial-textb {
width: 50%;
}
.testimonial-imga {
float: left;
}
.testimonial-imgb {
float: right;
}
.testimonial-texta {
float: right;
padding: 15px;
width: 50% background-color: #DFE3E6;
}
.testimonial-textb {
float: left;
padding: 15px;
width: 50%
}
.photo1 {
display: block;
height: 451px;
overflow: hidden;
position: relative;
}
.testimonial-photo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.test-text,
.test-text2 {
position: relative;
}
.test-text p {
margin: 0;
position: absolute;
top: 50%;
left: 25%;
transform: translate(-16%, 80%);
text-align: center;
}
.test-text2 p {
margin: 0;
position: absolute;
top: 50%;
left: 25%;
transform: translate(-16%, 15%);
text-align: center;
}
}
.testimonial-texta p {
color: #235A4A;
}
.testimonial-textb p {
color: #235A4A;
}
<div class="testimonial-container">
<div class="pic-testimonial">
<div class="testimonial-imga">
<figure class="photo1"><img class="testimonial-photo" src="http://www.artisanbelle.com/images/stories/amandac.jpg" alt="Amanda C"></figure>
</div>
<div class="testimonial-texta">
<div class="test-text">
<p>"These white topaz earrings are gorgeous. The stones catch the light and are so pretty. They can be dressed up or down and the craftsmanship is top quality. A great pair of earrings that go with everything." <br>- Amanda Coldwell</p>
</div>
</div>
</div>
// more pic-testimonial blocks
</div>
我希望灰色背景只围绕图片旁边的整个文本 block ,而不是图像周围。我希望它从图像的右侧一直延伸到整个文本 block 。
最佳答案
从 .pic-testimonial 类中删除 background-color
。和
添加下面的 CSS:
.pic-testimonial {
display: flex;
flex-wrap: wrap;
}
.testimonial-texta {
width: 50%;
background-color: #DFE3E6;
}
您在 .testimonial-texta
中的 width 属性之后错过了 ;
。我已经更正了
关于html - 背景颜色无法正确显示文本和图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57273101/