关于使用Thymeleaf设置背景图片不显示的问题

本文记录了作者在使用Thymeleaf模板引擎时遇到的登录界面背景图片无法显示的问题及解决过程。通过尝试将CSS中的`background`属性改为Thymeleaf的表达式方式,最终成功显示背景图片。作者强调在编程时要根据所使用的模板引擎思考问题,并提倡先自我排查再寻求外部帮助,以提升解决问题的能力。
摘要由CSDN通过智能技术生成
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }

        body {
            /* 首先增加背景图 */
            background-size: 100% auto; /* 设置背景的大小 */
            /* 将背景设置为不重复显示 */
            background-image: url("../static/images/background.jpg");
        }

        #loginDiv {
            border: 1px solid blue;
            width: 30%;
            text-align: center;
            margin: 15% auto 0;
            background: #00000080;
            padding: 20px 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            box-shadow: 7px 7px 17px rgba(56, 60, 69, 0.5);
            border-radius: 5px;
        }

        #name_trip {
            margin-left: 50px;
            color: red;
        }

        p {
            margin-top: 30px;
            margin-left: 20px;
            color: #ffefef;
        }

        input {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
            background-color: rgba(220, 203, 220, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }

        .button {
            border: 0; /* 取消按钮的边界 */
            width: 100px; /* 设置合适的按钮的长和宽 */
            height: 30px;
            margin-top: 18px; /* 设置合适的上部外框的宽度,增加与上面的password框的距离 */
            font-size: 18px; /* 修改按钮文字的大小 */
            color: white; /* 修改按钮上文字的颜色 */
            border-radius: 25px; /* 将按钮的左右边框设置为圆弧 */
            background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%); /* 为按钮增加渐变颜色 */
        }
    </style>

    <script type="text/javascript">
        function checkUser(){
            var result = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            if(result == ""  ){
                alert("用户名不能为空");
                return false;
            }
            if(password == ""  ){
                alert("密码不能为空");
                return false;
            }else{
                return true;
            }
        }
        function submitBtnClick(){
            document.fileForm.submit();
        }
    </script>

</head>

<body th:style="'background-image: url(../images/background.jpg)'">
<!--<img th:src="@{/images/background.jpg}" style="position: relative;z-index: -1"/>-->
<div id="loginDiv">
    <form id="form"  action="/result" method="get" >
        <h1 style="text-align: center;color: #eef0f3;">登录</h1>
        <p>用户:<input id="username" type="username"  placeholder="username" name="username"></p>
        <p>密码:<input id="password" type="password" placeholder="password"  name="password"></p>

        <div style="text-align: center;margin-top: 30px;">
            <input type="submit" class="button" value="登录" onclick="return checkUser();">
        </div>
    </form>
    <div style="margin-left: -40px;margin-top: 191px">
        <a href="/r">
            <button value="注册" class="button" style="height: 32px">注册</button>
        </a>
    </div>
</div>
</body>
</html>


Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本。
UP刚刚开始使用Thymeleaf,不是很会用。一开始登录界面想要引入背景图片,使用的是background:url("xxx.jpg")的方式,结果背景一直显示不出来。我去找了很多方法,结果还是不行。突然想起来我用的是Thymeleaf,然后就尝试像从数据库里拿数据那样来写background,结果就成功了。
这个是我拿数据的方式
这是我拿数据的写法。我把text改成style就行了。
最后想说,写代码的时候一定一定要先想一想用的是什么模板,看看终端自己错在哪里。是在自己没有办法解决的时候再去上网查答案。不然永远不会得到提高。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值