0
私は私のページに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;
\t 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>サイト：彼らはdissappearなぜ http://ryanteaches.com/newindex.html
任意のアイデア？
乾杯。
高さを見ることができ、空のDIVの25％は何も
されていないだけので、それは奇妙だ、私は、円形の画像を実装する方法を –