无法在图像容器上制作白色背景

问题描述：

我需要帮助，使边框内的白色和黑色描述一起。无法在图像容器上制作白色背景

实际情况是位于：http://buyersstop.blogspot.in/2016/01/motoe.html

我的问题是，如果我申请的白色背景颜色黑色边框的图像周围显示。

div.img1 { 
 
    border: 1px solid #777; 
 
} 
 
div.img1:hover { 
 
    border: 1px solid #ccc; 
 
} 
 
div.img1 img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
div.desc { 
 
    padding: 15px; 
 
    text-align: center; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.responsive { 
 
    padding: 6px 6px; 
 
    float: left; 
 
    width: 32.99999%; 
 
} 
 
@media only screen and (max-width: 700px) { 
 
    .responsive { 
 
    width: 49.99999%; 
 
    margin: 6px 0; 
 
    } 
 
}

<div class="responsive"> 
 
    <div class="img1"> 
 
    <a target="_blank" href="img_fjords.jpg"> 
 
     <img src="http://ecx.images-amazon.com/images/I/71YgvTPQnKL._SL1500_.jpg" alt="Trolltunga Norway" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="responsive"> 
 
    <div class="img1"> 
 
    <a target="_blank" href="img_fjords.jpg"> 
 
     <img src="http://ecx.images-amazon.com/images/I/71YgvTPQnKL._SL1500_.jpg" alt="Trolltunga Norway" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="responsive"> 
 
    <div class="img1"> 
 
    <a target="_blank" href="img_fjords.jpg"> 
 
     <img src="http://ecx.images-amazon.com/images/I/71YgvTPQnKL._SL1500_.jpg" alt="Trolltunga Norway" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="responsive"> 
 
    <div class="img1"> 
 
    <a target="_blank" href="img_fjords.jpg"> 
 
     <img src="http://ecx.images-amazon.com/images/I/71YgvTPQnKL._SL1500_.jpg" alt="Trolltunga Norway" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div>

答

.post-body img { 
padding: 8px; 
background: #FFF none repeat scroll 0% 0%; 
border: 1px solid transparent; 
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2); 
border-radius: 0px; 
} 

div.desc { 
padding: 15px; 
text-align: center; 
background-color: #FFF; 
color: #000; 
}

这应该照顾它。

Thx。你的代码工作完美。 –

如果这是你需要的，一定要把这个标记为你的答案:) –

显示很高兴。边框显示不正确。图像也需要是真正的中心。等待您的建议。 –

答

我已经做了一些修改你的代码看到我更新的代码。希望与你的预期相同。

div.img1 { 
 
    border: 1px solid #777; 
 
} 
 
div.img1:hover { 
 
    border: 1px solid #ccc; 
 
} 
 
div.img1 img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
div.desc { 
 
    padding: 15px; 
 
    text-align: center; 
 
    position: absolute; 
 
    bottom: 7px; 
 
    color: #fff; 
 
    left: 6px; 
 
    width: 96%; 
 
    background-color: rgba(10,10,10,0.5); 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.responsive { 
 
    padding: 6px 6px; 
 
    float: left; 
 
    width: 32.99999%; 
 
    position:relative; 
 
    background-color:#fff; 
 
} 
 
@media only screen and (max-width: 700px) { 
 
    .responsive { 
 
    width: 49.99999%; 
 
    margin: 6px 0; 
 
    } 
 
}

<div class="responsive"> 
 
    <div class="img1"> 
 
    <a target="_blank" href="img_fjords.jpg"> 
 
     <img src="http://ecx.images-amazon.com/images/I/71YgvTPQnKL._SL1500_.jpg" alt="Trolltunga Norway" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="responsive"> 
 
    <div class="img1"> 
 
    <a target="_blank" href="img_fjords.jpg"> 
 
     <img src="http://ecx.images-amazon.com/images/I/71YgvTPQnKL._SL1500_.jpg" alt="Trolltunga Norway" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="responsive"> 
 
    <div class="img1"> 
 
    <a target="_blank" href="img_fjords.jpg"> 
 
     <img src="http://ecx.images-amazon.com/images/I/71YgvTPQnKL._SL1500_.jpg" alt="Trolltunga Norway" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div> 
 
<div class="responsive"> 
 
    <div class="img1"> 
 
    <a target="_blank" href="img_fjords.jpg"> 
 
     <img src="http://ecx.images-amazon.com/images/I/71YgvTPQnKL._SL1500_.jpg" alt="Trolltunga Norway" width="600" height="400"> 
 
    </a> 
 
    <div class="desc">Add a description of the image here</div> 
 
    </div> 
 
</div>

无法在图像容器上制作白色背景

相关推荐