Question

类似的问题已被多次询问（如何在图像上放置文字），但每个解决方案都说要制作一个相对定位的容器并将图像和文本放在里面。

但如果容器必须是绝对的呢？

我希望图像是绝对的，以便跨越页面的整个宽度，而不受包装器宽度的限制：包装器设置了宽度，图像容器应该忽略它并且是全屏，文本应该浮动在图像上方。

这是一个fiddle，其中图像不会忽略包装器的宽度

.splash_image {
  position: relative;
  left: 0;
  top: 2%;
  height: 600px;
  overflow: hidden;
  z-index: 1;
}
.splash_image img {
  width: 100%;
  position: absolute;
}
.splash_title {
  color: red;
  position: absolute;
}
.wrapper {
  width: 50%;
}

<div class="wrapper">
  <div class="splash_image">
    <img src="http://fc07.deviantart.net/fs34/f/2008/290/6/4/Large_Tree_Stock_by_HauntingVisionsStock.jpg" alt="test image">
    <div class="splash_title">Test title to go here on image</div>
  </div>
</div>

Answer 1

您可以在图像容器上设置相对定位，因此即使您已经绝对定位图像，它也会完全定位在相对定位的容器中。如果我理解你正在寻找的东西，容器应该绝对定位：

.splash_image{
    position:absolute;
    left:0;
    top:2%;
    height:600px;
    width:100%;
    overflow: hidden;
    z-index: 1;
  }
  .splash_image img{
    width:100%;
  }
.splash_title{
  color:red;
  z-index: 88;
  position:absolute;
  top:0;
  left:0;
}

Updated Fiddle

Answer 2

有多种方法可以实现这一目标。这是一个简单的答案：

.splash_image {
  position: absolute;
  left: 0;
  top: 2%;
  height: 600px;
  overflow: hidden;
  z-index: 1;
}
.splash_image img {
  width: 100%;
}
.splash_title {
  color: red;
  position: absolute;
  z-index: 2;
}
.wrapper {
  width: 50%;
}

 <div class="splash_image">
     <img src="http://fc07.deviantart.net/fs34/f/2008/290/6/4/Large_Tree_Stock_by_HauntingVisionsStock.jpg" alt="test image" />
  </div>
<div class="wrapper">
     <div class="splash_title">Test title to go here on image</div>
</div>

https://jsfiddle.net/jonnysynthetic/2vqgab7t/

但是，您也可以尝试将图像设置为父元素的背景。我不确定它的范围或部分范围，所以我想先给你一个简单的答案。

Answer 3

试试这个：

Project().To<TViewModel>().SingleOrDefault()

Answer 4

"create table **contacts** (_id integer primary key autoincrement, " + "name text not null, surname not null, telephoneno notnull, postcode not null);"

https://jsfiddle.net/2tpbx12x/5/

将文本放在绝对图像上

4 个答案: