在圖像下方添加彩色塊以獲得文字

我一直在網上尋找答案，但找不到解決方案。我試圖顯示一個圖像，然後直接在下面有一個彩色塊（附在圖像的底部）作爲圖像上的標題。在圖像下方添加彩色塊以獲得文字

以下是我的CSS代碼和HTML頁面。我有這樣的CSS代碼：

/* SECTIONS */ 
.section { 
    clear: both; 
    padding: 0px; 
    margin: 0px; 
} 

/* COLUMN SETUP */ 
.col { 
    display: block; 
    float:left; 
    margin: 1% 0 1% 5.0%; 
} 
.col:first-child { margin-left: 0; } 

/* GROUPING */ 
.group:before, 
.group:after { content:""; display:table; } 
.group:after { clear:both;} 
.group { zoom:1; /* For IE 6/7 */ } 
/* GRID OF FOUR */ 
.span_4_of_4 { 
    width: 100%; 
} 
.span_3_of_4 { 
    width: 73.75%; 
} 
.span_2_of_4 { 
    width: 47.5%; 
} 
.span_1_of_4 { 
    width: 21.25%; 
} 

/* GO FULL WIDTH BELOW 480 PIXELS */ 
@media only screen and (max-width: 480px) { 
    .col { margin: 1% 0 1% 0%; } 
    .span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; } 
}

/***** HTML代碼：*****/

<div class="section group"> 
<div class="col span_1_of_4"> 
<img src="XXX" style="border-width: 1px; border-style: solid; width: 190px; height: 255px;" /></a> 
      <br /> 
      <a href="XXX">TEXT HERE</a> 

      </div> 

</div>

來源

2015-09-25 danield45

你可以讓你的鏈接標籤相同寬度圖像，並添加一個背景色。如果您提供了您想要的圖像，則提供更準確的幫助將會更容易。 –

您也可以將它放在'

'中，其中彩色部分位於其下方的行中。 – dstudeba

回答

.img-wrapper { 
    background: #888; 
    border-width: 1px; 
    border-style: solid; 
} 

.img-wrapper img { 
    width: 100%; 
    padding-bottom: 50px; 
} 

<div class="section group"> 
    <div class="col span_1_of_4"> 
     <div class="img-wrapper"> 
      <img src="xxx"> 
      <br> 
      <a href="XXX">TEXT HERE</a> 
     </div> 
    </div> 
</div>

來源

2015-09-25 15:33:37 R429km1

謝謝，這工作完美！ – danield45

裹的形象和在同一div標題，並給予div背景顏色。

這裏有一個簡單的例子：

<div id="wrapper"> 
    <img src="XXX" style="width: 190px; height: 255px;" /> 
    <a href="#">Text</a> 
</div> 


#wrapper { 
    background: #ccc; 
    display: inline-block; 
} 
    #wrapper a { 
    text-align: center; 
    display: block; 
    padding: 10px; 
    }

http://jsfiddle.net/eo9wfx5c/1/

來源

2015-09-25 15:16:22 ns1234

感謝您的代碼！ – danield45

相關問題