cssにて背景画像の上にロゴ画像を表示させたいのですが、現状背景画像が表示されるだけでロゴは表示されていない状態です。
背景画像、ロゴをそれぞれdivでくくっています。
背景画像の上にロゴを表示させるためにはどうしたらよろしいでしょうか?
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>Page Title</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 9 <script src="./js/jquery-3.3.1.js"></script> 10 11 <!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> --> 12 <link rel="stylesheet" type="text/css" href="./css/html5reset-1.6.1.css"> 13 <link rel="stylesheet" type="text/css" href="./css/top.css"> 14 15 <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 16</head> 17 18<body> 19 <div id="sign"></div> 20 <div id="back"> 21 22 <div id="top"> 23 <menu> 24 <ul> 25 <li><a href="profile.html">PROFILE</a></li> 26 <li><a href="#">WEB</a></li> 27 <li><a href="#">IDENTITY</a></li> 28 <li><a href="#">CONTACT</a></li> 29 </ul> 30 31 </menu> 32 <span id="top-text">Name</span> 33 <span id="top-text-bottom">Portfolio.</span> 34 </div> 35 </div> 36 37 <script src="./js/top.js"></script> 38</body> 39</html>
css
1body{ 2 font-family: 'Montserrat', sans-serif; 3 font-weight: lighter; 4} 5#sign{ 6 background-image: url(../image/sign_trans.png); 7 background-size: 50px; 8 /* position: absolute; 9 top: 40%; 10 left: 30%; */ 11 background-repeat: no-repeat; 12} 13#back{ 14 background-image: url(../image/top4.jpg); 15 height: 100vh; 16 background-size: cover; 17} 18#back{ 19width: 100%; 20position: relative; 21} 22#top img{ 23 width: 100%; 24 height: 100vh; 25 object-fit: cover; 26} 27/* #logo{ 28 position: absolute; 29 top: 33.5%; 30 left: 21%; 31} 32#logo img{ 33 width: 100px; 34} */ 35#top-text{ 36 color: #F2F2F2; 37 font-size: 3.8em; 38 position: absolute; 39 top: 25%; 40 left:15%; 41} 42 43#top-text { 44 font-weight: bold; 45 animation-name: fadein; 46 animation-duration: 2s; 47 48} 49@keyframes fadein{ 50from { 51 opacity: 0; 52 transform: translateX(-30px); 53} 54to { 55 opacity: 1; 56 transform: translateX(0); 57} 58} 59#top-text-bottom{ 60 color: #F2F2F2; 61 font-size: 1.8em; 62 position: absolute; 63 top: 33.5%; 64 left: 23.5%; 65} 66#top-text-bottom { 67 font-weight: bold; 68 animation-name: fadein-bottom; 69 animation-duration: 3s; 70 71} 72@keyframes fadein-bottom{ 73from { 74 opacity: 0; 75 transform: translateX(30px); 76} 77to { 78 opacity: 1; 79 transform: translateX(0); 80} 81} 82menu{ 83 width: 40%; 84 height: 50%; 85} 86ul{ 87 position: absolute; 88 top: 69.5%; 89 left: 5%; 90} 91li{ 92 line-height: 30px; 93 width: 10%; 94 color: white; 95 padding: 10px; 96 text-align: -webkit-match-parent; 97 98} 99li a{ 100 text-decoration: none; 101 list-style: none; 102 color: white; 103 position: relative; 104 display: inline-block; 105 transition: .3s; 106} 107 a::after { 108 position: absolute; 109 bottom: 4.6px; 110 left: 0; 111 content: ''; 112 width: 0; 113 height: 1px; 114 background-color: white; 115 transition: .3s; 116 } 117 a:hover::after { 118 width: 100%; 119 } 120
回答1件
あなたの回答
tips
プレビュー