.container { background-image: url(./images/login.jpg); background-size: 1500px 750px; width: 1500px; height: 750px; border: 1px black solid; /*background-repeat: no-repeat;*/ } 打开html有背景运行程序后图片消失
时间: 2023-06-27 14:03:48 浏览: 57
可能是图片路径的问题。请确保图片路径正确,并且在HTML文件中正确引用了图片。如果路径正确,您可以尝试使用相对路径来引用图片,例如 "../images/login.jpg"。另外,请确保您的图片文件格式正确,并且没有错误。如果问题仍然存在,请检查您的CSS代码并确保没有其他的样式覆盖了背景图片的样式。
相关问题
用uniapp写一个美观好看的登录界面,要求输入框有图标,总体页面美观大气
。非常感谢您的提问!UniApp是一个非常流行的开源框架,它可以让开发人员使用Vue.js编写跨平台的移动应用程序,这里向您推荐一种实现好看登录界面的方法:
```
<template>
<div class="login-container">
<div class="icon-container">
<img src="./assets/images/logo.png" alt="logo">
</div>
<form class="login-form">
<div class="input-container">
<i class="icon icon-user"></i>
<input type="text" placeholder="请输入用户名" />
</div>
<div class="input-container">
<i class="icon icon-password"></i>
<input type="password" placeholder="请输入密码" />
</div>
<button class="login-button">登录</button>
</form>
</div>
</template>
<script>
export default {
name: 'LoginPage'
}
</script>
<style scoped>
.login-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
background-color: #f5f5f5;
}
.icon-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 40px;
}
.icon {
display: inline-block;
width: 32px;
height: 32px;
margin-right: 10px;
background-repeat: no-repeat;
background-position: center;
}
.icon-user {
background-image: url(./assets/images/user.png);
}
.icon-password {
background-image: url(./assets/images/password.png);
}
.login-form {
width: 100%;
max-width: 420px;
padding: 30px;
box-sizing: border-box;
background-color: #fff;
border-radius: 6px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.input-container {
display: flex;
align-items: center;
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
}
input {
flex: 1;
width: 0;
height: 40px;
padding-left: 10px;
font-size: 16px;
border: none;
background-color: transparent;
outline: none;
}
input::placeholder {
color: #999;
}
.login-button {
width: 100%;
height: 50px;
margin-top: 30px;
font-size: 18px;
color: #fff;
background-color: #5d9cec;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color .2s;
}
.login-button:hover {
background-color: #4a89dc;
}
</style>
```
在这个模板中,我们使用了Flex布局,通过两个嵌套的div标签、form标签和相关CSS样式来完成登录界面的布局,并使用了assets文件夹下的图片文件作为图标,其中,对于输入框添加了一些样式,使得客户端呈现出良好的用户体验。
用HTML做一个登录页面,可以跳转到指定页面,使用动态背景
好的,以下是一个简单的用HTML做的登录页面,其中包含一个动态背景和跳转到指定页面的功能。你可以在自己的电脑上用文本编辑器打开并保存成HTML文件,然后在浏览器中打开它。
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
body {
background-color: black;
background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: slide 10s infinite;
}
@keyframes slide {
0% {
background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba');
}
50% {
background-image: url('https://images.unsplash.com/photo-1465453869711-7e174808ace9');
}
100% {
background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba');
}
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.7);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
text-align: center;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>Login</h2>
<form action="https://www.example.com/dashboard">
<label for="username"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="username" required>
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
```
在上面的代码中,我们使用了CSS的`background-image`属性来设置背景图片,并使用了`animation`属性来制作动态背景。我们还使用了一个`container`类来使表单居中,并使用了`box-shadow`属性来添加一个阴影效果。在form标签的`action`属性中,我们设置了指定页面的URL,当用户登录成功后,会自动跳转到该页面。
相关推荐
![gz](https://img-home.csdnimg.cn/images/20210720083447.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)