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-index值，它应该可以工作

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

3 个答案: