背景网址，只有一张图片有效

Question

我仍在学习 HTML/CSS/Js 并在 youtube 上关注本教程。

https://www.youtube.com/watch?v=7MDJtw3ZF-4&t=893s

我的问题是在 20:15 左右的时间戳，我的 eyes.png 没有出现。我觉得这很奇怪，因为我的 face.png 显示得非常好，它位于同一个文件夹中。

<p class="location"></p>

<div class="container">
    <div class="face_body">
        <div class="face">
            <div class="eye_pan">
                <div class="pan_area">

                        <div class="eye eye_l">
                            <div class="eye eye_r">

                            </div>
                        </div>


                </div>
            </div>
        </div>
    </div>
</div>

还有我的css

    html,body, .container{
  height: 100%;
  width: 100%;
  outline: 0px;
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.location{
  position: fixed;
  top: 0px;
  right: 0px;
  margin: 0px;
  background: rgba(255,255,255,0.4);
  padding: 10px;
}

.container{
  display: table;
  background: rgb(251,220,0);
  background: -webkit-linear-gradient(rgb(251,220,0), rgb(255,197,17));
  background: -o-linear-gradient(rgb(251,220,0), rgb(255,197,17));
  background: -moz-linear-gradient(rgb(251,220,0), rgb(255,197,17));;
  background: linear-gradient(rgb(251,220,0), rgb(255,197,17));
}

.face_body{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100%;
}

.face{
  height: 200px;
  width: 200px;
  margin: auto;    
  background: url(images/face1.1.png);
  background-size: 173px 200px;
  background-repeat: no-repeat;
}

.eye_pan{
  display: table;
  padding: 30px 50px;
}

.pan_area{
  width: 70px;
  height: 55px;
  position: relative;
}

.eye{
  height: 20px;
  width: 20px;
  border-radius: 5px;
  position: absolute;
  margin-left: 5px;
  transition: .5s height ease-in-out;
  border: 1px solid red;
  background: url(images/eyes.png);
}

.eye_r{
  top: 0px;
  left: 20px;
}

.eye_l{
  top: 50px;
  left: 25px;
}

我的 eye.png 没有显示的任何原因都很好。谢谢。

Answer 1

您的.eye 网址背景可能链接到错误的网址文件，或者它根本不在视图中。

尝试插入 background-size: cover; 或将其设置为 background-size（如果图像加载正常）。

html,body, .container{
  height: 100%;
  width: 100%;
  outline: 0px;
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.location{
  position: fixed;
  top: 0px;
  right: 0px;
  margin: 0px;
  background: rgba(255,255,255,0.4);
  padding: 10px;
}

.container{
  display: table;
  background: rgb(251,220,0);
  background: -webkit-linear-gradient(rgb(251,220,0), rgb(255,197,17));
  background: -o-linear-gradient(rgb(251,220,0), rgb(255,197,17));
  background: -moz-linear-gradient(rgb(251,220,0), rgb(255,197,17));;
  background: linear-gradient(rgb(251,220,0), rgb(255,197,17));
}

.face_body{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100%;
}

.face{
  height: 200px;
  width: 200px;
  margin: auto;    
  background: url(https://images.vexels.com/media/users/3/134743/isolated/preview/97ae591756f3dc69db88c09fd097319a-sad-face-emoji-emoticon-by-vexels.png);
  background-size: 173px 200px;
  background-repeat: no-repeat;
}

.eye_pan{
  display: table;
  padding: 30px 50px;
}

.pan_area{
  width: 70px;
  height: 55px;
  position: relative;
}

.eye{
  height: 20px;
  width: 20px;
  border-radius: 5px;
  position: absolute;
  margin-left: 5px;
  transition: .5s height ease-in-out;
  border: 1px solid red;
  background: url(//cdn.playbuzz.com/cdn/e732686f-35b2-4be6-a5fa-52f388bb0d0d/3637262a-2c14-43b0-9be2-b2174055f790_560_420.jpg);
  background-size:cover;
}

.eye_r{
  top: 0px;
  left: 20px;
}

.eye_l{
  top: 50px;
  left: 25px;
}

<p class="location"></p>

<div class="container">
    <div class="face_body">
        <div class="face">
            <div class="eye_pan">
                <div class="pan_area">

                        <div class="eye eye_l">
                            <div class="eye eye_r">

                            </div>
                        </div>


                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

检查您的拼写是否正确，例如“eye”而不是“eyes”，如果文件格式是“jpg”而不是“png”，请检查文件格式。

尝试清除浏览器缓存，以防浏览器未加载新文件

Answer 3

为background属性应用正确的CSS语法并检查你的图片路径是否正确。

background: url('images/eyes.png');

试试这个，如果问题仍然存在，请告诉我。

祝你有美好的一天，干杯！！！