Question

是html的新手并且正在学习设计UI。我想通过以下代码添加背景图片或主题。但它只显示颜色，而不显示图像。请让我知道如何实现它。

＆＃13;

<!Document html>
<html lang="en">
<base href="https://abcd.com">
<head>
<title>abcd</title>
</head>
<style>
body{
background-image: url("paper.gif");
background-color: #cccccc;
}
</style>

<body>
<h1 align="center" style="color:brown;position:absolute;top: 3%; left: 41%;">abcd</h1>
</div>
<h2 style="color:skyblue; position:absolute;top: 20%; left: 39%;">Login</h2>
<div style="position:absolute;top: 26%; left: 39%; width:300px;height:120px;border:1px solid #000;"></div>
<form name="login" style="font-size:larger;position:absolute;top: 27%; left: 40%;">
            Username : <input type="text" name="userid"/><br></br>
            Password : <input type="password" name="pswrd"/><br></br>
            <input class="btn btn-primary" style="font-size:medium;background-color: #FFF8DC; position:absolute;top: 95%; left: 50%;" type="button" onclick="check(this.form)" value="Login"/>
            <input style="font-size:medium;background-color: #FFF8DC; position:absolute;top: 95%; left: 75%;" type="reset" value="Cancel"/>
        </form>

</body>
</html>

＆＃13;

我已将图像放在C：\ Users \ myuser \ Pictures \ HTML

中

Answer 1

您已将图片路径设置为：url("paper.gif")，然后将您的图片放在html文件所在的同一文件夹中。

你写的方法正确。只需设置正确的路径。

background-image: url("paper.gif");

或者你想设置c：驱动路径。

background-image: url("file://C:/Users/myuser/Pictures/HTML/paper.gif");

但我不会推荐它。

您可以将图片放在images文件夹中，并提供如下路径：

background-image: url("images/paper.gif");

Answer 2

确保图像的路径正确。你的语法是正确的，只需确保路径。您还可以将背景属性更改为

background-position: center;
background-repeat: no-repeat;

它会使您的背景图像居中。

如何通过CSS添加背景图片或主题？

2 个答案: