web
本帖最后由 LKUN 于 2020-11-21 13:42 编辑本地网页刷新一瞬间是灰色的 是什么问题呢背景图也是同级文件夹里的
大佬们有知道的么 浏览器没加载出来？
最好提供一下代码哈~ 小甲鱼 发表于 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"> <!-- <link rel="stylesheet" href="css/font-awesome.min.css"> --> <!-- 格式：<i class="图标名称"></i> --> <!-- <link rel="stylesheet" href="css/bootstrap.min.css"> --> <!-- 格式：<button type="button" class="按钮名称"></button> --></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">    <input type="reset" name="" value="Reset"> </div> </form> </div></body></html> 小甲鱼 发表于 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,input{ 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%); }} 就是网页刷新一瞬间先是灰色 像是加载 然后才出来全部内容 请问是不是背景图片加载慢的原因呢 有什么解决办法么 {:5_104:}能截一个效果图吗，而且你这个代码复制出来看着真的难受 Dear黑色 发表于 2020-11-21 13:35
能截一个效果图吗，而且你这个代码复制出来看着真的难受
效果图就一瞬间 已经解决了 就是图片太大了 改了大小像素 快多了
页:
[1]