Q&A
>画像は同じ階層におり
何と同じ階層でしょうか。
画像は同じ階層におりcssをbodyから始めて指定すると画像が表示されるのですがそれだとpaddingなどbody全体にいってしまいます。しかしboxクラスで処理をしようとすると画像が表示されません。
HTML
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <link rel="stylesheet" type="text/css" href="test.css"> 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 9 <title>模写1</title> 10</head> 11<body> 12 <div class="container-fluid"> 13 <div class="row"> 14 <!--##############header##################--> 15 <a href="#"> 16 17 <img class="logo" src="air-logo.img" a href="#" height="30px" width="30px"> 18 </a> 19 <div style="text-align:right;"> 20 <ul class="head"> 21 <li>予想月収</li> 22 <li><h4>¥151,550</h4></li> 23 <li class="button"><a href="#" class="b2">はじめる</a></li></ul></div> 24 <div class="box"></div> 25 26 27 28 </div> 29 </div> 30 31</body> 32</html>
CSS
1.logo{margin:25px 30px 30px 5px;} 2ul{list-style: none;} 3li{float: left; margin: 30px 20px;} 4.button{border: solid; color: white; background-color: orangered; border-radius: 10px; 5 padding: 7px 15px;} 6.b2:hover{text-decoration: none; color: white;} 7.b2{color: white;} 8@media screen and(min-width:480px;){.head{display: flex-end;}} 9.box{background-image: url('main.img'); 10 background-repeat: no-repeat; 11 background-position: 20% 20% 20% 20%; 12 background-size: cover; 13 height: 80%; width: 500px; 14 15}
>cssをbodyから始めて指定すると
意味が分かりません。分かりやすく説明してください。
あとなんでしょう。タイトルの「命令できない」って。
回答2件
0
url('main.img')
.imgという拡張子の画像なのでしょうか。
正常に認識されないと思います。
あとデベロッパーツールで検証してみると分かりますが、
.box自体のheightが効いてなくて0pxになってるので
例え画像のパスが合ってても表示されないかと。
投稿2020/02/14 10:58
編集2020/02/14 11:03総合スコア80850
自己解決あなたの回答
tips
プレビュー
