1

我创建了这个网站。现在，我想将文本放在标题中的这两个图像上。相关代码在这里

<div class="header">
    <img src="css/title578145459.png" class="headerImage left"/>
    <img src="css/title756941752.png" class="headerImage right"/>
    <span class="headerText">Ubytovna Stavařov Přerov</span>
</div>

和 CSS

.headerImage {
    width: 50%;
    height: 100%;
}

.header {
    position: relative;
    height: 190px;
    text-align: center;    
    padding-top: 5px;
    opacity: 0.8;
}

.headerText {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    color: yellow;
    font: normal 3em sling;
    font-style: oblique;
}

我尝试设置不同的值top和bottom属性，我也尝试设置padding，margin但这些都没有奏效。感谢您的任何提示。

4

2 回答 2

2

您在 .headerText 上的 z-index 应该是正数。使用 Chrome 开发工具，我可以使用以下命令查看文本：

.headerText {
position: absolute;
top: 120px;
left: 0px;
right: 0;
z-index: 1;
}
于 2013-02-13T19:14:12.507 回答
1

尝试这个

.headerText {
position: absolute;
top: 50%;
left: 25%;
right: 25%;
z-index: 1;
}
于 2013-02-13T19:29:08.413 回答