文本和背景颜色之间的CSS - positioning图像

Question

我正在尝试重新创建一些东西，这是我自己错误地做的：https://bgiltphotos.files.wordpress.com/2015/09/img.jpg

这是我第一次尝试CSS，我一直在权宜之计地添加选择器。然后我决定重写这个文件，并且没有保存原始文件...

标题部分有一个img position:absolute和一个h1，然后是文章文本。我不能重现的是文本的前三行图像的位置:它位于文本和背景颜色之间(然后我只为这三行反转了文本颜色)。无论我现在尝试什么，我要么让图像覆盖文本和背景颜色，要么让背景颜色覆盖第一行文本中的图像。

下面是当前的CSS：

html { 
    background-color: #5F5F5F;
}

img.shost {   
    position: absolute;    
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto; 
}

div#headertext {
    position: relative;
    top: 5em;
    left: 2.0em;
    width: 60em;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

div#articleMain {
    position: relative;
    top: 10em;
    width: 60em;
    margin-left: auto;
    margin-right: auto;
    background-color: #fdfdf9;
}

任何帮助都将不胜感激！

Answer 1

解决了这个问题--必须将背景颜色属性赋予正文，而不是文章。

谢谢你们的帮助，伙计们！

Answer 2

假设img.shost是您的图像，只需添加一个属性top并摆弄变量，直到找到所需的图像位置

这是一个草率的Codepen http://codepen.io/noobskie/pen/MaYdbj

只需更改top:-120%;，您就会明白我的意思

Answer 3

请尝试给出图像z-index= -1；

如果您将z索引值提供给相对定位的父级，它应该会起作用