如何使用css，html疊加圖片上的文字（鏈接）wordpress

Question

我正在用wordpress製作我的購物網站。 現在我正在製作頭版。我想在鏈接到產品詳細信息頁面的頁面上放置一些圖像（或者我想要的任何其他頁面）。

主要問題是... 我想覆蓋圖像上的一些文本，它就像圖像一樣響應。我發現了許多文字圖像疊加的答案。然而，這並沒有幫助，因爲我需要在「鏈接」圖像上添加一些文本，並且我想讓整個圖像區域都可點擊包括添加的文本。

每個解決方案都應該有一個響應當然。

下面的例子正是我想要的東西： http://www.glasses.com/

Answer 1

您的問題一個很乾淨的解決方案，具有4種文字重疊定位。

<div class="module top"> 
    <h2>Skyscrapers</h2> 
</div> 

<div class="module mid"> 
    <h2>Skyscrapers</h2> 
</div> 

<br style="clear: both;"> 

<div class="module cap"> 
    <p>Skyscraper are really neat and stuff because they are tall.</p> 
</div> 

<div class="module lr"> 
    <p>Skyscrapers sometimes have nicknames like jim or shim.</p> 
</div> 

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400,900); 

.module { 
    background: 
    linear-gradient(
     rgba(0, 0, 0, 0.6), 
     rgba(0, 0, 0, 0.6) 
    ), 
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg); 
    background-size: cover; 
    width: 300px; 
    height: 200px; 
    margin: 10px 0 0 10px; 
    position: relative; 
    float: left; 
} 
.module:hover{ 
    background: rgba(1,222,123,0.3); 
} 
.top h2 { 
    color: white; 
    margin: 0; 
    padding: 20px; 
} 

.lr p { 
    font-family: 'Roboto', sans-serif; 
    position: absolute; 
    bottom: 20px; 
    left: 20px; 
    color: white; 
    margin: 0; 
} 

.mid h2 { 
    font-family: 'Roboto', sans-serif; 
    font-weight: 900; 
    color: white; 
    text-transform: uppercase; 
    margin: 0; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    font-size: 2rem; 
    transform: translate(-50%, -50%); 
} 

.cap p { 
    padding: 20px; 
    color: white; 
    font: 12px Monaco, Mono-Space; 
    margin: 0; 
}