Question

这是我正在创建的登录表单，它已经有一个图像（一些徽标）。我想为同一页面添加一些背景图像，使其美观。不幸的是我的CSS并没有帮助我做到这一点。如果已有图像，我该怎么办才能将背景图像添加到我的网页

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>
      Login
    </title>
    <link rel="stylesheet" type="text/css" href="css/Login.css">
  </head>
  <body >
    <header >
      <h1>Loan Management System </h1>
    </header>
    <!--This is the image -->
    <img src="Images/logo_large.jpg" height="200px" width="200px" title="Logo" class="logo">
    <form>
      <label>Username</label>                       
      <input type="text" name="username"/>                      
      <label>Password</label>                       
      <input type="password" name="password"/>                      
      <button type="submit" name="login">Login</button>
    </form>
  </body>
</html>

CSS

header
{
  position:absolute;
  font-size:13px;
  color:#000040;
  text-shadow:5px 5px 5px #CCCCD9;
  margin-top:80px;
  margin-left:280px;
}

body
{
  position:relative;
  font-family:Georgia,serif;
  background-color:#A52A2A;
  background-image:url(Images/login2.jpg);
}

.logo
{
  position:absolute;
  display:block;
  padding:5px;
}

form
{
  position:absolute;
  width:300px;
  height:300px;
  border:5px solid #194775;
  border-radius:20px;
  margin-top:161px;
  margin-left:362px;
  box-shadow:2px 2px 2px #194775;
}

label,input
{
  display:block;
  margin-top:25px;
  margin-left:55px;
}

label
{
  font-weight:700;
}

input
{
  width:200px;
  height:2em;
  border:2px solid #036;
  border-radius:10px;
}

input:hover
{
  border-radius:10px;
  border-color:#FF8A00;
}

input:focus
{
  background-color:#DBDBFF;
}

button
{
  display:block;
  margin-top:25px;
  margin-left:55px;
  width:90px;
  height:40px;
  color:#FFF;
  border:2px solid #000;
  border-radius:10px;
  background-color:#243D91;
}

button:hover
{
  background-color:#0FCCF0;
  border-color:#003D91;
}

Answer 1

我将此作为“回答”发布，因为评论的时间太长了。正如我在评论中提到的，urss的css路径是相对于存储css的目录而不是包含它的页面的目录进行解析的。举个例子：

您的网站包含根和2个子文件夹，CSS和Images。您的目录结构可能如下所示：

mypage.html 
myotherpage.html
CSS\styles.css
CSS\layout.css
Images\login.jpg
Images\login2.jpg

如果mypage.html有styles.css的引用链接，那么styles.css中包含的任何网址图片都需要从CSS目录中引用。

background-image: url(Images/login2.jpg);
/* This fails because there is no CSS\Images directory */

background-image: url(../Images/login2.jpg);
/* This works because that is the natural path to the Images directory from CSS */

为了避免这种混淆，我希望尽可能在我的css中使用绝对路径，但是当你有可能跨越域或协议边界时，这变得可以理解。如果您有多个域指向同一个站点文件夹，那么您将拥有myfirstsite.com到mysecondsite.com的样式参考，这可能是不合适的（特别是如果品牌是一个问题）。您可能还有一个站点的https部分，该部分将引用该站点的非https版本，这将创建ssl错误/警报。

Answer 2

嗯，明显的嫌疑人是你检查图像的路径..如果那样好，那么你可能想看看CSS的z-index属性。它处理图像在垂直空间中的排序方式。您可以阅读它here ..在您的情况下，身体背景将位于背面（z-index：0），然后是前面的徽标（z-index：1）。

Answer 3

我认为正如评论中提到的那样。您应该检查您的路径以查看它是否呈现。

查看我的Fiddle

body{
position:relative;
font-family:Georgia,serif;
/* I have used background-color property and it gets applied, but I really do not want it*/
background-color:brown;
/* Here is my background image.But it is not applied in the page */ 
background-image:url("https://mozorg.cdn.mozilla.net/media/img/firefox/os/bg/1400/birthday.jpg");
}

如果图像上已有图像，如何添加背景图像？

3 个答案: