html - CSS – 在文本和背景颜色之间定位图像

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

解决了——必须将背景颜色属性赋予 body 而不是 article。

谢谢大家的帮助!