Question

我是Web Dev的新手，我目前正在学习HTML和CSS。我喜欢确保在继续学习之前我可以做100％的事情而且我陷入了一些可能太愚蠢的事情但我已经在这方面苦苦挣扎了几个小时。

我想要做的是使用CSS（背景图片）将图片添加到网站。

这是我使用的代码（我使用CSS但是为了问题我将它放在HTML中的标签内）。

  <!DOCTYPE html>
    <html>
      <head>
       <style>
  .fml {
     position: relative;
      background-image: url("http://oi63.tinypic.com/z6be8.jpg");
     background-repeat: no-repeat;
      min-height: 100px;
      width: 30%;
      border: 1px solid;
     }
    .txt {
      color: white;
      position: absolute;
    bottom:0;
    left:0;
     }
       </style>
      </head>
      <body>
         <div class="fml">
        <p class="txt">This is a random picture</p>
       </div>
    </body>
    </html>

现在您可以看到，背景图片仅显示一小部分，因为高度设置为100像素。但是，如果我希望程序自动检测图像的大小并扩展其边框直到图片以其实际尺寸显示，该怎么办？如果我不知道图片的大小怎么办？

额外问题：正如您所看到的，即使文本位置是＆＃34;底部：0，左：0＆＃34;它不是在左下角，而是高一点，为什么呢？谢谢你的回答！

PS：对于缩进感到抱歉，我很着急所以我没有时间在这里正确地缩进代码。再次感谢您的回答！

Answer 1

要更改要使用正文标记的整个网页的背景。而不是叫你的div id。

<!DOCTYPE html>
<html>
<head>
  <style>
      body {
          position: relative;
          background-image: url("http://oi63.tinypic.com/z6be8.jpg");
          background-repeat: no-repeat;
          border: 1px solid;
    }

    .txt {
        color: white;
        position: absolute;
        bottom: 0;
        left: 0;
    }
  </style>
</head>

<body>
    <div class="fml">
        <p class="txt">This is a random picture</p>
    </div>
</body>
</html>

放置图片的默认尺寸为

1 个答案: