Question

我正在尝试使用HTML和CSS构建自己的网站。我很困惑为什么使用CSS和HTML不适合我。

我的HTML文档中有以下代码块：

<body>
  <div id="image">
      <img src="header_photo.jpg" alt="" width="500" height="250"/></div>
      <div id="h20" <p>Insert Overlay Text Here</p></div>
 <h1> About Me</h1>

以下代码在我的CSS脚本中：

 body {
  font-size: 14px;
  color: black;
  background-color: #d0e4fe;
}

h1 {
  color: white;
  background-color: #009;
}

#image {
  position: relative;
  border-width: 5px;
}

#h20 {
  color: red;
  background-color: blue;
  position: absolute;
}

如何将＃h20文本叠加在图像顶部，由ID选择器指示，＃image？目前的结果是图像，左对齐，下面有文字。我想用CSS来做这个而不是用HTML格式化，但我甚至无法获得我的照片边框。任何帮助表示赞赏。

编辑：我已更新我的脚本以包含上述编辑;但是，我的header_image仍然没有边框，文本覆盖了h1，“关于我”。我想知道我还有什么错误才能得到这些错误？谢谢你的帮助。

Answer 1

有一些基本错误。首先，p元素的样式设置为color=red无效。看看你的其他CSS，你应该能够轻松地告诉那里有什么问题。其次，所有CSS属性都必须具有单位值，例如px或em或者你有什么。您的border财产没有这些。

最后，您需要了解定位的基本原理。默认情况下，图像是内联的，如文本。因此，后面的任何文本也将在一个行框中，就像一段文字。如果一行文本（图像本质上）后跟一个真实的文本行，你可以想象那里发生了什么。

所以，要实现重叠，你希望，＆＃34;定位＆＃34;是你需要学习的东西。

所有这些都涵盖了许多方面，使答案非常广泛。你需要在其他地方搞清楚。

Answer 2

CSS和HTML中存在很多语法错误。尝试使用以下内容替换它们：

<强> HTML：

<body>
  <div id="image">
    <img src="header_photo.jpg" alt="" width="500" height="250"/>
    <div id="h20"><p>Insert Overlay Text Here</p></div>
  </div>
</body>

<强> CSS：

body {
  font-size: 14px;
  color: black;
  background-color: #d0e4fe;
}

h1 {
  color: white;
  background-color: #009;
}

#image {
  position: relative;
  border-width: 5px;
}

#h20 {
  color: red;
  background-color: blue;
}

p {
  color: red;
}

希望有所帮助。

Answer 3

<div id="image">

必须关闭。然后：

#h2{
position: absolute;
}

Answer 4

在你的html中：你忘了关闭#image div导致一些麻烦

<body>
  <div id="image">
    <img src="header_photo.jpg" alt="" width="500" height="250"/>
    <div id="h20">
      <p>
        Insert Overlay Text Here
      </p>
    </div>

在你的CSS中：很多小的语法错误，比如color=red

body {
  font-size: 14px;
  color: black;
  background-color: #d0e4fe;
}

h1 {
  color: #fff;
  background-color:#009;
}

#image {
  position: relative; // To position the div relatively in the body
  border-width: 5px;
}

#h20 {
  color: red;
  background-color:blue;
  position: absolute; // To position the image absolute depeding of parents postition
  top:0;
}

p {
  color:red;
}

这应该正常工作

Answer 5

好的，我修改了你的代码，你犯了一些错误。我相信这是你正在寻找的叠加类型。编辑顶部和左侧值以调整其在＃h20 id上的位置。如果您希望它具有更高的响应速度，您也可以将其更改为百分比值。如果你真的希望它具有响应能力，我推荐使用twitter-bootstrap .jumbotron。

body {
  font-size: 14px;
  color: black;
  background-color: #d0e4fe;
}

h1 {
  color: white;
  background-color: #009;
}

#image {
  position: relative;
  border-width: 5px;
}

#h20 {
  color: red;
  position: absolute;
  top: 50px;
  left: 50px;
}

<body>
      <div id="image"><img src="header_photo.jpg" alt="" width="500" height="250"/></div>
      <div id="h20"> <p>Insert Overlay Text Here</p></div>
      <h1>About Me</h1>
</body>

基本的HTML和CSS链接不起作用

5 个答案: