如何在图像背景上叠加文本

Question

这是我的CSS

.newbody
{
    background-image:url('Images/CityofChicago.jpg');

    height:600px;
    width:1270px;
    position:relative;

}

.otherstuff
{

     position:absolute;
}

这是我的HTML

   <div class="newbody">
      <!--  <img src="Images/CityofChicago.jpg" height="600px" width="1280px" class="image" alt=""/> -->
      some Text

      <div class="otherstuff">
      <ul>
        <li>One </li>
        <li>Two </li>
        <li>Three</li>
      </ul>
      </div>
      </div>

Answer 1

您的代码看起来正确，只需要获得正确的图像路径即可。如果你的css在你的html文档中是内联的，那么html文档的位置就成了基础，如果你的css在.css文件中，那么它的位置就是基础。如果您的结构是：

• 的index.html
  • / CSS
    • 的style.css
  • /图像
    • CityofChicago.jpg

然后该行将是background-image:url('../Images/CityofChicago.jpg');