HTML 背景图片自适应

CSS 

 body.loginpage {
        background-image: url(../images/background-image.jpg);
        background-size:cover;
    }

HTML

复制代码
<body class="loginpage">

    <div class="loginpanel">
        <div class="loginpanelinner">
            <div class="logo animate0 bounceIn">
                <img src="UI/main.shamcey/images/logo.png" alt="" />
            </div>
            <div class="inputwrapper login-alert">
                <div class="alert alert-error">Invalid username or password</div>
            </div>
            <div class="inputwrapper animate1 bounceIn">
                <input type="text" name="username" id="username" placeholder="Enter any username" />
            </div>
            <div class="inputwrapper animate2 bounceIn">
                <input type="password" name="password" id="password" placeholder="Enter any password" />
            </div>
            <div class="inputwrapper animate3 bounceIn">
                <button id="submit" name="submit">Sign In</button>
            </div>
            <div class="inputwrapper animate4 bounceIn">
                <label>
                    <input type="checkbox" class="remember" name="signin" />
                    Keep me sign in
                </label>
            </div>
        </div>
    </div>

    <div class="loginfooter">
        <p>&copy; 2013. Shamcey Admin Template. All Rights Reserved.</p>
    </div>

</body>
复制代码

 

posted @   秋风过、枯叶落  阅读(1299)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
点击右上角即可分享
微信分享提示
AI IDE Trae