無法在圖像容器上製作白色背景

我需要幫助，使邊框內的白色和黑色描述一起。無法在圖像容器上製作白色背景

實際情況是位於：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>

來源

2016-01-24 Swarup Modak

.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; 
}

這應該照顧它。

來源

2016-01-24 16:41:47

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>

來源

2016-01-24 16:41:16 Nere

無法在圖像容器上製作白色背景

回答

相關問題