Question

我一直在寻找stackoverflow来找到我的问题的答案，但我找不到它。问题是我有一个背景img，我想在其上有文字。但如果我使用 postition：absolute; ，文本就会消失。我也不想要我的风格，因为我会在不同的页面上使用不同的图像。

Visit problem

HTML：

    <body>
        <div id="header">
            <img src="http://www.larsdejonge.nl/werk/img/background.jpg" class="begin">
                <h1>Aangenaam Klassiek</h1>
                <h2>Vormgeving & Frontend</h2>
        </div>
</body>

我的CSS：

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html, body {
    width: 100%;
    height: 540px;
    background: #efede7;
}

body {
    background: #efede7;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    line-height: 1.3;
}

#header {

}

.begin {
    width: 100%;
    max-height: 540px;

}

h1 {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 3em;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

h2 {
    font-family: 'ProximaNova', sans-serif;
    font-size: 1.5em;
    color: #c7c7c7;
    text-align: center;
}

h2::after {
    content: '';
    width: 80px;
    display: block;
    background: #272f38;
    height: 10px;
    margin: 30px auto;
    text-align: center;
}

我希望有人比我更聪明，能想出来吗？

感谢您已经对此进行了调查！

Answer 1

您将背景设为图像，因此它不仅仅是背景，还包含尺寸元素。您应该删除<img />并使用CSS将其作为背景。

#header {
    background: url('http://www.larsdejonge.nl/werk/img/background.jpg');
}

Answer 2

从html中删除标题图片，改为使用CSS属性。

请参阅使用此更新的CSS代码段的 DEMO ：

#header {
background-image: url('http://www.larsdejonge.nl/werk/img/background.jpg');
background-size: auto 540px;
background-repeat: no-repeat;
height: 540px;
}

背景调整大小是必要的，因为你的图像太大了。

Answer 3

删除<IMG>并使用img网址作为CCS中的背景：

这是一个例子：

http://jsfiddle.net/act6uasf/5/

Answer 4

如果你真的想用绝对位置来解决这个问题，可以使用我的例子

http://jsfiddle.net/act6uasf/2/

这里要使绝对属性工作，你只需要添加

position:relative;

到#header，但我建议你尝试使用background属性来解决它。

Answer 5

CSS并不能阻止您按照建议的方式更换图像。我会使用一个身体类。

<强> HTML

<body class="home"><!-- change this class for each page -->
     <div class="intro">
          <p>
               Hello World!
          </p>
     </div>
</body>

只需更改每个页面的body标签上的类，即home，about，contact等。

<强> CSS

.home .intro {
     background-image: url('path-to-image.jpg');
}
.about .intro {
     background-image: url('path-to-some-other-image.jpg');
}

这是demo。将主体标签上的类从主页交换到约，然后单击“运行”以查看差异。

Answer 6

我看到你不想在你的CSS中使用img，但是如果你想要我认为你需要找到你的自己。我不认为在你的CSS矿石中使用网址的大问题只是我吗？

My solution

你现在可以更好地使用它，如果你以后找到别的东西，你可以随时改变它。

HTML代码：

    <body>
        <div id="header">
            <div class="text">
                <h1>Aangenaam Klassiek</h1>
                <h2>Vormgeving & Frontend</h2>
            </div>
        </div>
</body

CCS代码：

#header {
    background-image: url(http://www.larsdejonge.nl/werk/img/background.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 540px;
}
.text {
    padding-top: 150px;
}

h1 {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 3em;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

h2 {
    font-family: 'ProximaNova', sans-serif;
    color: #545454;
    font-size: 1.25em;
    letter-spacing: .06em;
    margin: 0;
    padding: 0 0 2.5em;
    text-align: center;
    text-transform: uppercase;
}

h2::after {
    content: '';
    width: 80px;
    display: block;
    background: #272f38;
    height: 10px;
    margin: 30px auto;
    text-align: center;
}

如何让我的文字在我的img <div>上面？</div>

6 个答案: