所以我的页面上有 3 个圆形图像。出于某种原因，当我将它们的高度/宽度从 px 更改为 % 时，图像就消失了。它们在 200px 高度/宽度和 50px 时完美工作..但我希望它们为 20%。
代码:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
body{width: 100%;}
/*Parallax*/
.parallax{
background-image: url("bg.jpg");
height: 540px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
position:relative;
}
/*Parallax*/
#header{
position: absolute;
top: 40%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
left: 20%;
font-size: 4vw;
display: flex;
align-items: center;
justify-content: center;
padding-top: 15px;
padding-bottom: 20px;
background-color: #357eca;
width: 50%;
word-wrap: break-word;
opacity: 0.9;
font-weight: 900;
padding-left: 5%;
padding-right: 5%;
}
h5
{
color:white;
text-align: center;
font-family: 'Montserrat';
text-transform: uppercase;
font-weight: 900;
/*-webkit-margin-before:0.67em;
-webkit-margin-after:0.67em;
-webkit-margin-start:0px;
-webkit-margin-end:0px;
-webkit-tap-highlight-colour:rgba(0,0,0,0);
-webkit-font-smoothing:antialiased;
-webkit-box-direction:normal;
position: absolute;*/
}
h5:after, h5:before
{
content: '';
width: 50px;
height: 2px;
background: black;
margin: 0 10px;
}
/*--- Circular images --- */
.img-circular1,
.img-circular2,
.img-circular3 {
width: 25%;
height: 25%;
background-size: cover;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background: red;
display: block;
margin: 0 auto;
}
.img-circular1 {
background-image: url('/Images/learn.jpg');
}
.img-circular2 {
background-image: url('/Images/watch.jpg');
}
.img-circular3 {
background-image: url('/Images/practice.jpg');
}
#container1 {
top: 100px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
width: 70%;
background-color: green;
overflow: auto;
bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.wrap {
flex-grow: 1;
}
</style>
</head>
<body>
<div id="navigation"></div>
<div class="parallax"><h5 id="header"><b>Welcome to RyanTeaches</b></h5></div>
<!--<img src="bg.jpg" style="top:60px;height: 510px;min-width: 100%;">-->
<div id="content">
<h2 style="margin-top: 0px;">Activities</h2>
</div>
<div id="container1" style="padding-bottom: 400px;">
<div class="wrap">
<div class="img-circular1"></div>
</div>
<div class="wrap">
<div class="img-circular2"></div>
</div>
<div class="wrap">
<div class="img-circular3"></div>
</div>
</div>
<div id="content">
<h2 style="margin-top: 0px;">Activities</h2>
</div>
<script src="nav.js"></script>
<script src="template.js"></script>
</body>
</html>要查看的站点: http://ryanteaches.com/newindex.html
知道它们为什么会消失吗？
干杯。
最佳答案
图像消失的原因，你的 DIV 的 CLASS="wrap"没有内容 IE(没有宽度和/或高度)来显示图像。
简而言之:空 DIV 的 25% 不算什么
就这样你可以看到...例如
.wrap {
width: 100px;
height: 100px;
}
关于javascript - 当高度/宽度从像素切换到百分比时图像消失？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44976818/