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;
}

为什么我的eyes.png不显示的任何原因都很好。谢谢。

Answer 1

您的.eye网址背景可能链接到错误的URL文件，或者只是不在视图之内。

请尝试插入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');

尝试一下，让我知道问题是否仍然存在。

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

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

3 个答案: