[已解决]web

LKUN · 发表于 2020-11-20 23:24:19

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 LKUN 于 2020-11-21 13:42 编辑

本地网页刷新一瞬间是灰色的是什么问题呢背景图也是同级文件夹里的
大佬们有知道的么

最佳答案

月排行榜 / 总排行榜

小甲鱼

2020-11-21 03:15:53

浏览器没加载出来？

最好提供一下代码哈~

跳转到最佳答案楼层

小甲鱼 · 发表于 2020-11-21 03:15:53

浏览器没加载出来？

最好提供一下代码哈~

LKUN · 发表于 2020-11-21 11:49:58

小甲鱼发表于 2020-11-21 03:15
浏览器没加载出来？

最好提供一下代码哈~

<!DOCTYPE html><html><head> <title>Login</title> <meta charset="UTF-8"> <link rel="icon" type="image/x-icon" href="img/favicon-2.ico"> <link rel="stylesheet" type="text/css" href="css/style.css">    </head><body> <div class="cloud"> <img src="img/cloud1.png" style="--i:1;"> <img src="img/cloud2.png" style="--i:2;"> <img src="img/cloud3.png" style="--i:3;"> <img src="img/cloud4.png" style="--i:4;"> </div> <div class="box"> <h1>Login</h1> <form> <div class="inputBox"> <input type="text" name="" required=""> <label>Username</label> </div> <div class="inputBox"> <input type="password" name="" required=""> <label>Password</label> </div> <div class="submitBox"> <input type="submit" name="" value="Submit"> &emsp;&emsp; <input type="reset" name="" value="Reset"> </div> </form> </div></body></html>

LKUN · 发表于 2020-11-21 11:50:41

小甲鱼发表于 2020-11-21 03:15
浏览器没加载出来？

最好提供一下代码哈~

body{ margin: 0; padding: 0; font-family: sans-serif; background-image: url("../img/7.jpg"); background-size:cover; /* 平铺 */ background-repeat: no-repeat; background-attachment: fixed; /* 当页面的其余部分滚动时，背景图像不会移动 */ }.box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400px; padding: 40px; background: rgba(0, 0, 0, 0.5); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0, 0, 0, 0.7); border-radius: 10px;}.box h1{ margin: 0 0 30px; padding: 0; color: white; text-align: center;}.box .inputBox{ position: relative;}.box .inputBox input{ width: 100%; padding: 10px 0; font-size: 20px; color: white; letter-spacing: 1px; margin-bottom: 30px; border: none; border-bottom: 1px solid white; outline: none; background: transparent;}.box .inputBox input:focus{ border-bottom: 1px solid rgb(15, 200, 150) ;}.box .inputBox label{ position: absolute; top: 0; left: 0; padding: 10px 0; font-size: 20px; color: white; letter-spacing: 1px; pointer-events: none; transition: 1s;}.box .inputBox input:focus ~ label,.box .inputBox input:valid ~ label{ top: -25px; left: 0; color: rgb(15, 200, 150); font-size: 15px;}.box .submitBox{ text-align: center;}.box input[type="submit"],input[type="reset"]{ font-size: 15px; border: none; outline: none; color: white; background: rgb(15, 200, 150); padding: 10px 20px; cursor: pointer; border-radius: 7px;}.cloud img{ position: fixed; bottom: -10%; max-width: 100%; animation: animate calc(10s * var(--i)) linear infinite;}@keyframes animate{ 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); }}

LKUN · 发表于 2020-11-21 11:57:06

就是网页刷新一瞬间先是灰色像是加载然后才出来全部内容

LKUN · 发表于 2020-11-21 12:09:36

请问是不是背景图片加载慢的原因呢有什么解决办法么

Dear黑色 · 发表于 2020-11-21 13:35:50

能截一个效果图吗，而且你这个代码复制出来看着真的难受

LKUN · 发表于 2020-11-21 13:42:26

Dear黑色发表于 2020-11-21 13:35
能截一个效果图吗，而且你这个代码复制出来看着真的难受

效果图就一瞬间已经解决了就是图片太大了改了大小像素快多了

账号		自动登录	找回密码
密码			立即注册