拽猫的尾巴 发表于 2022-10-26 23:16:32

引用外部css文件时只显示部分效果

本帖最后由 拽猫的尾巴 于 2022-10-27 10:30 编辑

我css样式时内嵌样式的时候时可以正常显示背景的，如下图所示：


代码：
<!DOCTYPE html>
<html>
<head>
    <title>登录界面</title>
    <script>
      function hide() {
            var h = document.getElementById("login_interface");
            h.style.display="none";
      }
      function show() {
            var e = document.getElementById("login_interface");
            e.style.display="block";
      }
    </script>
    <style>
      body {
            background-image: url(D:/画/电脑壁纸/1.jpg);
            background-size: 3000px;
            background-position: center 20%;
      }
      #login_enroll {
            width: 900px;
            height: 600px;
            border-radius: 10px;
            box-shadow: 0px 5px 10px 5px rgb(0, 0, 0, 0.5);
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
      }
      #login_interface {
            background-color: rgb(220, 220, 220);
            width: 450px;
            height: 600px;
            border-radius: 10px 0px 0px 10px;
      }
      #enroll_interface {
            background-color: rgb(255, 180, 180~1);
            width: 450px;
            height: 600px;
            border-radius: 0px 10px 10px 0px;
      }
      .son {
            float: left;
      }
      .fo {
            margin-top: 30%;
            text-align: center;
      }
      h2 {
            font-family: "等线";
            font-size: 30px;
            font-weight: 100;
      }
      input {
            width: 400px;
            height: 50px;
            font-size: 20px;
            border-style: none;
            border-radius: 10px;
      }
      a {
            text-decoration: none;
            color: rgb(94, 94, 94);
            font-size: 15px;
      }
      button {
            width: 150px;
            height: 50px;
            font-size: 15px;
            font-weight: 900;
            color: #fff;
            border-radius: 10px;
            border-style: none;
            background: repeating-linear-gradient(to left, rgb(255, 170, 163), rgb(255, 97, 97));
            box-shadow: 0px 1px 5px 1px rgb(0, 0, 0, 0.5);
      }
      #zhuce {
            text-align: center;
            margin-top:60%;
      }
    </style>
</head>
<body>
    <div id="login_enroll">
      <div id="login_interface" class="son">
            <form action="*" method="post" name="登录界面" class="fo">
                <h2>登录</h2>
                <input type="text" placeholder=" 账号：" name="account"><br><br>
                <input type="password" placeholder=" 密码：" name="password"><br><br>
                <a href="" target="_blank">忘记密码？</a><br><br><br>
                <button type="button" onclick="hide();">登 录</button>
            </form>
      </div>

      <div id="enroll_interface" class="son">
                <div id="zhuce"><button type="button" onclick="show();">注 册</button></div>
      </div>
    </div>
</body>
</html>

但是当我从外部链接css文件的时候，只显示了部分效果，背景没了，如下图：


html代码如下：
<!DOCTYPE html>
<html>
<head>
    <title>登录界面</title>
    <link rel="stylesheet" href="./登录界面.css">
<body>
    <div id="login_enroll">
      <div id="login_interface" class="son">
            <form action="*" method="post" name="登录界面" class="fo">
                <h2>登录</h2>
                <input type="text" placeholder=" 账号：" name="account"><br><br>
                <input type="password" placeholder=" 密码：" name="password"><br><br>
                <a href="" target="_blank">忘记密码？</a><br><br><br>
                <button type="button" onclick="hide();">登 录</button>
            </form>
      </div>

      <div id="enroll_interface" class="son">
                <div id="zhuce"><button type="button" onclick="show();">注 册</button></div>
      </div>
    </div>
</body>
</html>

css文件代码如下（文件位置应该没错，背景图片在同一个文件夹下，绝对/相对路径都试过了）：
<style>
    body {
      background-image: url(./1.jpg);
      background-size: 3000px;
      background-position: center 20%;
    }
    #login_enroll {
      width: 900px;
      height: 600px;
      border-radius: 10px;
      box-shadow: 0px 5px 10px 5px rgb(0, 0, 0, 0.5);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
    #login_interface {
      background-color: rgb(220, 220, 220);
      width: 450px;
      height: 600px;
      border-radius: 10px 0px 0px 10px;
    }
    #enroll_interface {
      background-color: rgb(255, 180, 180~1);
      width: 450px;
      height: 600px;
      border-radius: 0px 10px 10px 0px;
    }
    .son {
      float: left;
    }
    .fo {
      margin-top: 30%;
      text-align: center;
    }
    h2 {
      font-family: "等线";
      font-size: 30px;
      font-weight: 100;
    }
    input {
      width: 400px;
      height: 50px;
      font-size: 20px;
      border-style: none;
      border-radius: 10px;
    }
    a {
      text-decoration: none;
      color: rgb(94, 94, 94);
      font-size: 15px;
    }
    button {
      width: 150px;
      height: 50px;
      font-size: 15px;
      font-weight: 900;
      color: #fff;
      border-radius: 10px;
      border-style: none;
      background: repeating-linear-gradient(to left, rgb(255, 170, 163), rgb(255, 97, 97));
      box-shadow: 0px 1px 5px 1px rgb(0, 0, 0, 0.5);
    }
    #zhuce {
      text-align: center;
      margin-top:60%;
    }
</style>

kishere 发表于 2022-10-27 09:50:53

你这什么操作？付费答题？？？

拽猫的尾巴 发表于 2022-10-27 10:31:55

kishere 发表于 2022-10-27 09:50
你这什么操作？付费答题？？？

搞错了，我还以为那个选项是给币别人来着{:9_234:}

拽猫的尾巴 发表于 2022-10-27 10:34:13

kishere 发表于 2022-10-27 09:50
你这什么操作？付费答题？？？

找不到怎么设置悬赏

拽猫的尾巴 发表于 2022-10-27 11:14:16

解决了，把css文件里的<style>删除就行{:9_220:}

当初约定 发表于 2022-10-27 14:34:02

拽猫的尾巴 发表于 2022-10-27 11:14
解决了，把css文件里的删除就行

不愧是刚启航的小白{:10_256:}

514592647 发表于 2022-10-27 16:29:27

你把外部样式表的<style></style>删除就好了

zhangjinxuan 发表于 2022-10-27 19:07:38

看看

hveagle 发表于 2022-10-27 20:08:29

zhangjinxuan 发表于 2022-10-27 19:07
看看

冲呀！

1molHF 发表于 2022-10-28 08:28:35

看看
页: [1]
查看完整版本: 引用外部css文件时只显示部分效果