将文字置于绝对图像

多次提出类似问题（如何在图像上放置文字），但每个解决方案都说明要制作一个相对放置的容器，并将图像和文字放在里面。将文字置于绝对图像

但是如果容器需要是绝对的？

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

这里是一个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>

来源

2015-05-12 auto

所以删除'位置：relative'从'.splash_image' – j08691

什么是.splash_image默认的定位是什么？当我删除相对时，它不再对图像溢出产生影响。举例来说，如果你改变了.splash_image高度60PX，而不是600和.splash_image删除相对位置，它不裁剪 https://jsfiddle.net/2tpbx12x/3/ – auto

您设置图像容器上的相对位置，所以即使你定位在图像绝对地，它被绝对定位在相对定位的容器内。该容器应定位绝对如果我理解你在找什么：

.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

来源

2015-05-12 16:58:56 APAD1

谢谢！我错误地认为img需要一个定义的位置，所以这个方法从来没有在我的一系列组合中做到。 – auto

试试这个：

.splash_image img{ 
    width:100%; 
    position:fixed; 
    }

来源

2015-05-12 17:01:53

有多种方式来实现这一目标。这里有一个简单的答案：

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

然而，你也可以尝试设置的图像作为背景，以父元素为好。我不确定这是什么或其中的一部分，所以我想先给你简单的答案。

来源

2015-05-12 17:05:46

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

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

来源

2015-05-12 17:16:24 Dan

将文字置于绝对图像

回答

相关问题