背景图像顶部的文本和按钮答案

【问题标题】：Text and button on top of background image背景图像顶部的文本和按钮
【发布时间】：2015-02-07 17:44:30
【问题描述】：

我正在尝试在背景图像上添加文本和按钮，但我无法确定液体页面上的边距和位置的 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>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x 背景图像 x
x 此处的文字：X
x 此处的文字：x
x x
x 此处的按钮：x
x x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

在我获得 10 个声望发布图片之前，它不会让我为图片做广告。

【问题讨论】：

你能做一个演示吗，也许在 fiddle 或 jsbin 中？
@GiacomoPaita 他已经有一个代码 sn-p，你为什么还要一个小提琴？
Giacomo Paita 感谢您的评论！我对js不是很熟悉。这仍然可以用html或css创建吗？
感谢 dave7 看@这个！
感谢戴夫看@这个！

标签： html css button text background-image

【解决方案1】：

这是你要找的吗？

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

【讨论】：

【解决方案2】：

您可以去掉 <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/

【讨论】：

你为什么要把 CSS 和内联样式混合在一起......？
因为当你想要几个这样的盒子时更容易操作，你只需更改每个盒子的背景图像，其余部分保持不变
在这种情况下，很容易给元素一个 id 并从 CSS 文件中添加它......混合 CSS 和内联样式是一种非常糟糕的做法......
好的，但是如果你有一个 PHP while 并且你想在不同的框中显示来自 DB 的不同图像怎么办？我并不是说这是唯一的方法，但这样做更容易。

【解决方案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>

【讨论】：

感谢 hbogs、Piotrek Ryszka、Marian 和所有看过@这个的人！你们好棒！我希望你们有一个美好的一天！再次感谢！
版主您可以将此标记为已关闭！多么棒的编码社区！感谢 Stackoverflow！
@x09 如果此答案对您的帮助最大，那么您可以将其标记为已接受的答案。单击此答案左上角的复选标记。

【解决方案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 将元素放置在图层中，并将图像设置在所有其他项目下方。

【讨论】：