Question

我用html和css编写了一个包含一些文本和图像的网站，但我不知道如何用它覆盖图像（如何用文本覆盖图像）。

HTML：

<!DOCTYPE html>
<html lang ="de">
<head>
    <title>SirMarkypus | Homepage</title>
    <link href="homepage.css" rel="stylesheet" type="text/css">
    <meta charset="utf-8">
</head>
<body>
    <h1 id="headline1">Willkommen auf dem SirMarkypus-Server!</h1>
    <img id="backgrounder1" src="img/backgrounder.png" alt="SirMarkypus-
Backgrounder">
</body>
</html>

CSS：

body {
background: gray;
}
#backgrounder1 {
position: absolute;
top: -60px;
width: 1910px;
height: 720px;
}

#headline1 {
position: relative;
margin: 0px;
padding: 10px;
text-align: center;
font-family: "Verdana";
font-size: 48px;

color: #FFF;
}

Answer 1

在CSS中，在#headline1中添加属性z-index: 9999;并将其position更改为absolute

z-index做的是将div推到另一个上方/下方。因此，z-index: 1的div低于z-index: 10

的div

Answer 2

我认为覆盖图像和H1将会让你在将来遇到麻烦，我建议将图像用作#headline1（或body的背景，如果这就是你的话需要）。

您可以使用CSS实现此目的：

background-image: url(http://2.bp.blogspot.com/-UbfRzKJqnyk/UJyT60Mm7eI/AAAAAAAADFs/bLcANzIsYfs/s1600/pattern_of_holes-dark_background_pattern.jpg);

这是结果（运行代码片段）：

＆＃13;

body {
  background: gray;
}
#backgrounder1 {
  position: absolute;
  top: -60px;
  width: 1910px;
  height: 720px;
}

#headline1 {
  position: relative;
  margin: 0px;
  padding: 10px;
  text-align: center;
  font-family: "Verdana";
  font-size: 48px;
  color: #000;
  background-image: url('http://freedesignfile.com/upload/2013/09/Metal-background-5.jpg');
}

＆＃13;

<!DOCTYPE html>
<html lang ="de">
<head>
</head>
<body>
    <h1 id="headline1">Willkommen auf dem SirMarkypus-Server!</h1>
</body>
</html>

＆＃13;

Answer 3

给你的h1提供z-index; 例如：

h1 {
  z-index: 1040;
}

你可以在这里看到： JS-FIDDLE：https://jsfiddle.net/60c5napb/

CSS / HTML用文本覆盖图像？

3 个答案: