在图像上获取文本

Question

创建了一个全屏图像，即在您进入我的网站时填满整个网站。但我不能在图像上制作文字，以便我可以阅读更多按钮和欢迎来命名。

这是我的代码：

<div class="row">
    <div class="col-md-12-">
        <img class="img-responsive" style="min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; " src="~/Content/img/maxresdefault%20(1).jpg" />
    </div>
</div>

关于如何在图片上添加文字的任何建议？

它需要看起来像这样：

Answer 1

有几种方法：

• 内有文字的div和style="background: url('my_img.png');"。
• 一个div位置：绝对; z-index：-1;＆＃39;在它后面包含img或背景img。

Answer 2

有两种方法可以做到，第二种选择IMO是最简单的。

1. 绝对定位
2. 从顶部偏移，边距和中心对齐按钮/内容

http://codepen.io/anon/pen/jbBVeB

body{
  background: url(http://placehold.it/1600x900);
}

.welcome{
  margin-top: 50px;
  text-align: center;
}

Answer 3

使用background-image方法，您的CSS代码将是：

body{
background-image: url('~/Content/img/maxresdefault%20(1).jpg');
background-position: center;
background-attachment: fixed;
}

把它放在CSS上你已经完成了！

Answer 4

只需将position属性值absolute和正z-index属性值添加到文本容器中。请参阅下面的示例并根据需要进行调整。

.row  {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  }

.col-md-12 {
  width: 100%;
  height: 100%;
  }

.col-md-12 img {
  width: 100%;
  height: auto;
  }




.text {
  position: absolute; /* Make stack-ability possible */
  z-index: 3;
  top: 100px;
  left: 50px;
  color: white;
  font-size: 36px;
  font-weight: bold;
  background: black;
  opacity: 0.70;
  padding: 10px;
  ;

<div class="row">

  <div class="col-md-12">

  <img src="http://i.stack.imgur.com/xvCoo.jpg">
    
    </div>
  
  
  <div class="text">   Whatever your text is goes here </div>
  
  <div>