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>并在background-image上使用.feature_home样式并给它position:relative;，这样你就可以定位feature_home和{{1就像你想要它一样。

这里有HTML代码：

feature_button

这是CSS：

<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>

所有值都是例如：）

http://jsfiddle.net/cjtdhcLr/

Answer 2

这是你在找什么？

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

使用position：absolute; http://www.w3schools.com/css/css_positioning.asp

绝对定位绝对位置元素相对于具有静态位置的第一父元素定位。如果找不到这样的元素，则包含块为：

这应该足以让你入门。我不会使用实际的img。您最好将图像指定为feature_home div的背景。请参阅css background-image。

如果必须使用img，则需要使用z-index将元素放置在图层中，并将图像设置在所有其他项目下方。

文本和按钮在背景图象顶部

4 个答案: