圖像上的css文本

我有一個圖像，必須採取全寬。我需要在一個特定的地方放置一個文本和一個按鈕。我查看了很多主題，但無法弄清楚如何使其充分響應。圖像上的css文本

<div class"wrapper"> 
    <div class="image-box"> 
     <img src="x"> 
    </div> 
    <div class="content-box"> 
     <h1>text goes there</h1> 
     <a>anchor tag goes there</a> 
    </div> 
</div>

所以這是佈局，但它可以改變，如果它讓我到我需要的點。

如果我理解正確，父div被稱爲包裝應設置爲位置：相對和所有子div的位置：絕對，之後，你只需定位所有這些子元素的頂部，左側，右側，底部。所以經過測試，這是我得到的。由於圖像始終是視口的100％，因此它的高寬比會越來越小。圖像上的文字和按鈕只是停留在一個固定的位置，在某一點之後它會從圖像中消失。

我的錯誤是什麼？

P.S發現了很多話題，但仍然是，我搞砸了。感謝您的見解和幫助。

來源

2014-10-02 DasBoot

image標籤用於在頁面上創建一個單獨的元素。這不是真的你想要什麼......你想要的內容框有一個背景，對吧？而不是使用圖片標籤，使用CSS應用背景圖片。

here is a jsfiddle

.content-box { 
 
    /* set width and height to match your image */ 
 
    /* if these are omitted, it will only be as big as your content, */ 
 
    /* and only show that much of your image */ 
 
    width: 200px; 
 
    height: 300px; 
 
    /* obviously, replace this with your image */ 
 
    background:url('http://placecage.com/200/300'); 
 
}

<div class"wrapper"> 
 
    <div class="content-box"> 
 
     <h1>text goes there</h1> 
 
     <a>anchor tag goes there</a> 
 
    </div> 
 
</div>

來源

2014-10-02 13:10:12

我想這是你想要的。此外，這是一個很好的機會來使用這些HTML5標籤figure 和figcaption，但基本上所有你需要的是這種結構：

<div class="wrapper"> 
    <img /> 
    <div class="content-box"> 
     <!-- Your content here --> 
    </div> 
</div>

所以這裏發生的一切是你的wrapper的尺寸由固定圖像，然後你絕對定位你的content-box或其中的元素。如果你不想在你的形象的頂部或底部，它們的位置，只需使用百分比值positionning時：

top: 10%;

figure { 
 
    position: relative; 
 
} 
 

 
figure img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
figure figcaption { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    background: rgba(255,255,255,.7); 
 
    padding: 10px; 
 
}

<figure> 
 
    <img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" /> 
 
    <figcaption> 
 
    <h1>The image title</h1> 
 
    <p>This is the image caption</p> 
 
    </figcaption> 
 
</figure>

來源

2014-10-02 13:13:40

圖像上的css文本

回答

相關問題