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

I'm trying to recreate something, which I myself did by mistake: https://bgiltphotos.files.wordpress.com/2015/09/img.jpg

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

It was my very first CSS attempt, and I kept adding selectors in a stopgap fashion. Then I decided to rewrite the file, and did not save the original...

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

This has an img position:absolute and an h1 in the header section, and then comes the article text. What I can't reproduce is the positioning of the image for the first three lines of the text: it's between the text and the background color (I then reversed the text color just for these three lines). Whatever I tried now, I either have the image covering both text and background color, or else the background color covering the image from the first line of text.

这有一个img位置：绝对和标题部分中的h1，然后是文章文本。我无法重现的是文本前三行的图像定位：它位于文本和背景颜色之间（然后我为这三行反转了文本颜色）。无论我现在尝试什么，我要么将图像覆盖文本和背景颜色，要么覆盖第一行文本中覆盖图像的背景颜色。

Here is the current CSS:

这是当前的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;
}

Any help would be very much appreciated!

任何帮助将非常感谢！

3 个解决方案

#1

Solved it – had to give the background-color property to body and not to article.

解决了它 - 必须给背景颜色属性而不是文章。

Thanks for the help, guys!

谢谢你的帮助，伙计们！

#2

Assuming img.shost is your image just add a property top and mess around with the variables until you find your desired image position

假设img.shost是你的图像，只需添加一个属性top并乱用变量，直到找到你想要的图像位置

Heres a sloppy Codepen http://codepen.io/noobskie/pen/MaYdbj

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

just change the top:-120%; and you can see what I mean

只需更改顶部：-120％;你可以看到我的意思

#3

please try to give the image z-index= -1;

请尝试给图像z-index = -1;

it should work if you give a z-index value to the relative positioned parent

如果你给相对定位的父级赋予z-index值，它应该工作

#1