Question

我是HTML新手。我正在尝试在我的网页背景中加载图像。看起来路径有问题。有人可以告诉我哪里出错了吗？

<!DOCTYPE html>
<html>

    <head>
        <title>Login & Registration Page</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body background="../IMG_2609.jpg">

        <div style="font-family:verdana;padding:20px;border-radius:20px;border:20px solid #0000FF;">
            <h1> Login Screen</h1>
            <form action="Login" method = "post">
                <center><strong> User Email</strong>:<input type = "text" name = "email"><br></center>
                <center><strong>Password</strong>:<input type="password" name="password"><br></center>
                <center><input  type = "submit" value = "Login"></center>
            </form>
            <br>    
        </div>
    </body>
</html>

Project Structure

感谢任何帮助。

谢谢！

Answer 1

尝试使用background CSS property：

<body style="background: url(IMG_2609.jpg) center center no-repeat;">

永远记住url是相对于CSS文件的，但在你的情况下，因为它是内联的，它将是你的实际HTML文件。

Here's an example using a Google image:

enter image description here

<!DOCTYPE html>
<html>
    <head>
        <title>Login & Registration Page</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body style="background: url('http://www.google.com/images/srpr/logo11w.png') center center no-repeat;">

        <div style="font-family:verdana;padding:20px;border-radius:20px;border:20px solid #0000FF;">
            <h1> Login Screen</h1>
            <form action="Login" method = "post">
                <center><strong> User Email</strong>:<input type = "text" name = "email"><br></center>
                <center><strong>Password</strong>:<input type="password" name="password"><br></center>
                <center><input  type = "submit" value = "Login"></center>
            </form>
            <br>    
        </div>
    </body>
</html>

Answer 2

<body>不支持background HTML5属性（从doctype声明中可以明显看出）。改用CSS。

CSS语法：<body style="background-image:url('IMG_2609.jpg')">

HTML图像未加载的问题

2 个答案: