如何让文本部分覆盖图像？

-4

屏幕截图： → here。 （我已经盘旋蓝色我想要的！）

...我已经寻找这对谷歌，但我得到的唯一结果是Image Captions，这不是我所期待的。

任何帮助将不胜感激。

2016-08-11 Andrew C.

预计你至少尝试为自己的代码这一点。堆栈溢出不是代码写入服务。我建议你做一些[**额外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），无论是通过谷歌或通过搜索，做出尝试和。如果您仍然遇到麻烦，请返回**您的代码**并解释您尝试过的以及为什么它不起作用。 –

我已经完成了研究，唯一出现的是文本**完全**覆盖图像，就像一个标题。如果你看到图像，那不是我正在寻找的东西。 –

然后，你必须**证明**你已经尝试过，所以我们不会浪费时间......我们不介意读者去了解你所尝试和拒绝的内容。在这里还有**数千个**的问题在文本和图像叠加。尝试做一个搜索。 –

只需在文本元素中使用position: relative并将其左移一些值即可。

代码：

h1 { 
    position: relative; 
    top: 50%; 
    right: 6%; 
}

的jsfiddle： → here。

例子：

#wrapper { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
#parent { 
 
    width: 550px; 
 
    height: 343px; 
 
    background-image: 
 
    url(https://media-cdn.tripadvisor.com/media/photo-s/08/73/aa/76/trolltunga.jpg); 
 
    background-size: contain; 
 
} 
 
#child { 
 
    position: relative; 
 
    top: 50%; 
 
    right: 6%; 
 
}

<div id="wrapper"> 
 
    <div id="parent"> 
 
    <h1 id="child">A Fantastic Title<br/>&rarr;</h1> 
 
    </div> 
 
</div>

来源

2016-08-11 21:50:30

如何让文本部分覆盖图像？

回答

相关问题