文字和背景圖片上方的按鈕

Question

我正在嘗試在背景圖片上方添​​加文本和按鈕，因此我無法弄清楚CSS在液體頁面上的邊距和位置。如果您可以引導我正確的方向或提供幫助。 謝謝！

 .feature_home{ margin:? position:? } .feature_image{ margin:? position:? } .feature_text{ margin:? position:? } .feature_button{ margin:? position:? } 

 <div class="feature_home"> <img class="feature_image" alt="Thanks For your guys help" src="images/xyz.com"> <p class="feature_text">I really appreciate your guys help!</p> <a class="feature_button" href="/xyz-101/">Thank You</a> </div> </div> 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x background Image               x                
x                   Text Here:   X
x                   Text Here:   x                             
x                                x
x                   Button Here: x  
x                                x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

在獲得10個聲譽發布圖像之前，它不會讓我做廣告。

Answer 1

您可以擺脫<img>並在.feature_home上使用background-image樣式，並為其指定一個position:relative; 因此您可以根據需要feature_home和feature_button 。

這里有HTML代碼：

<div class="feature_home" style="background-image:url(image);">
   <p class="feature_text">I really appreciate your guys help!</p>
   <a class="feature_button" href="/xyz-101/">Thank You</a>
</div>

這是CSS：

.feature_home{
    width:300px;
    height:200px;
    position:relative;
    display:block;
    background-position:center center;
    background-size:100%;
}
.feature_text{
    position:absolute;
    right:2px;
    bottom:15px;
}
.feature_button{
    right:2px;
    bottom:2px;
    position:absolute;
}

所有值都是例如：)

http://jsfiddle.net/cjtdhcLr/

Answer 2

這是你想要的？

 .feature_home{ position: relative; display: table-cell; vertical-align: bottom; text-align: right; width: 350px; /* image width */ height: 150px; /* image height */ } .feature_image{ position: absolute; top: 0; left: 0; z-index: -1; } 

 <div class="feature_home"> <img class="feature_image" alt="Thanks For your guys help" src="http://placehold.it/350x150"> <p class="feature_text">I really appreciate your guys help!</p> <a class="feature_button" href="/xyz-101/">Thank You</a> </div> 

http://jsfiddle.net/7zvL5zto/2/

Answer 3

這是可行的方法，請選擇紅色圖像而不是紅色背景

 .feature_home { width:400px; background:red; float:left; padding:15px } p { text-align:right; } a { float:left; text-align:right; width:100%; } 

 <div class="feature_home"> <p class="feature_text">I really appreciate your guys help!</p> <a class="feature_button" href="/xyz-101/">Thank You</a> </div> 

Answer 4

<style>
.feature_home{
background-image:url("http://2.bp.blogspot.com/-biBlhcDYdZI/ULjLQeeCwzI/AAAAAAAAAmo/T9M9YTcMeWY/s400/BackgroundPanel.pngg");
background-repeat:no-repeat;
padding-left:25px;
padding-right:25px;
height:200px;
width:321px;
position:absolute;
  }
.feature_button{
color:white;
position:absolute;
right:30px;
  }
</style>

<div class="feature_home">
<p class="feature_text">I really appreciate your guys help!</p>
<a class="feature_button" href="/xyz-101/">Thank You</a>
</div>
</div>

使用位置：絕對； http://www.w3schools.com/css/css_positioning.asp

絕對位置絕對位置元素是相對於具有非靜態位置的第一個父元素放置的。 如果找不到這樣的元素，則包含的塊為：

這應該足以讓您入門。 我不會使用實際的img。 您最好將圖像分配為feature_home div的背景。 參見css背景圖片。

如果必須使用img，則需要使用z-index將元素放置在圖像設置在所有其他項目下面的圖層中。