開発者ツールを使って要素にカーソルを合わせた状態です。
画像にpaddingもmarginもついていないのですが、どういうことかお分かりでしょうか。
html
1 2 <section class="bg"> 3 <div class="inner"> 4 <img src="img/part0_img01.png"> 5 </div> 6 </section>
css
1.bg { 2 background: url(img/part1_img02.jpg) left/100% 100% no-repeat; 3 position: relative; 4 5 width: 100%; 6 height: 500px; 7 position: relative 8} 9 10.bg .inner { 11 12 background-color: transparent; 13 background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #000), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, #000), color-stop(.75, #000), color-stop(.75, transparent), to(transparent)); 14 -webkit-background-size: 4px 4px; 15 width: 100%; 16 height: 100% 17} 18 19.bg img { 20 width: 60%; 21 position: absolute; 22 top: 50%; 23 left: 50%; 24 transform: translate(-50%, -50%) 25} 26
https://teratail.com/questions/235178 この質問と内容が同じです。teratailは質問内容の編集ができるので、変更がある場合は新しい質問をするのではなく編集してください。また、こちらの質問を削除されるよう運営に連絡されることをお勧めします。 https://teratail.com/help#delete-question https://teratail.com/contact/input
回答1件
あなたの回答
tips
プレビュー