どうも！LSSです！！
CSSを知らなくてもなんとなく遊べる（？）、CSSパズル第三問です！
CSSパズル カテゴリーの記事一覧 - Little Strange Software
CSSパズル 第三問！
２つの写真があります。
上が「お手本」で、下が「回答」です。
そのさらに下に、赤い枠線で囲んだコードがあり、その中にいくつかの選択肢が入っています。
選択肢を変更すると「回答」の表示がそのコードで生成したものに変化するので、「回答」を「お手本」と同じものになるよう、正しい選択肢を選ぶ、という出題です。
なお、選択肢を変更した際に、さらにその下にある「現在のコード」がその選択肢の場合のコードとなります。（つまり、その時点で表示されている「回答」のコードですね）
全ての選択肢が正しいものになり、「お手本」と「回答」が同じになった時、「正解です！！」という文字が現れます。
.photo{
position:relative;
display:inline-block;
padding:;
}
.photo img{
display:block;
}
.photo div{
position:;
width:100%;
height:100%;
top:0;
left:0;
pointer-events:none;
background:
linear-gradient(,5%,5.25%,),
linear-gradient(315deg,#ffffff 5%,#000000 5.25%,transparent 5.5%);
}
</style>
<div class="photo">
<img src=中略 />
<div> </div>
</div>
現在のコード
「現在のコード」について
正解かそうでないかに関わらず、ご自由にコピペして使っていただけます。
ただ、出題時に
<img src=中略 />
としている箇所は使いたい画像ファイルを指定したimgタグに置き換える必要があります。
例えば、はてなブログで画像を挿入すると、
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20221016/20221016232258.jpg" width="992" height="744" loading="lazy" title="" class="hatena-fotolife" itemprop="image" />
のようなimgタグが生成されますので、こちらに貼り替える必要があります。
やっている事と言えば…
HTMLの構成は次にようになっています。
<div class="photo">
<img src=中略 />
<div> </div>
</div>
「photo」というクラス名を持つdivタグ（<div class="photo">から</div>まで）の中に、imgタグがひとつ、空のdivタグがひとつ入っている状態です。
※空のdivタグがimgタグより後ろにあるところがポイント
photoクラスを持つdivタグには「position:relative;」を指定し、その中のdivタグには「position:absolute;」と「top:0;」「left:0;」を指定しています。
relativeの中に、absoluteと位置指定をつけた要素があると、absoluteを指定した要素は「relativeな親要素」の中での「absolute（絶対位置指定）」をされた事になり、他の要素と平気で重なったりもします。
今回の例では、imgタグ（画像）に重なって表示されていますね。
この時、imgタグよりもコード上 後に書かれた空のdivタグの方が手前に表示される事になります。
よりシンプルな実例を挙げると、
<div style="border: 1px solid pink;">
<div>あいうえお</div>
<div>かきくけこ</div>
</div>
<div style="border: 1px solid pink; position: relative;">
<div>あいうえお</div>
<div style="position: absolute; top: 0; left: 0;">かきくけこ</div>
</div>
という感じで、写真とその上の要素（backgroundで描いた透過つきgradient）を重ねています。
応用例
ちょっとふざけた効果ですが…
コード
<style>
.photo2{
position:relative;
display:inline-block;
}
.photo2 img{
display:block;
}
.photo2 div{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
pointer-events:none;
padding:10px;
background: radial-gradient(#ffff4400 80%,#ffff40 91%) 0 0/150px 150px,radial-gradient(#ffff4400 85%,#ffff40 96%) 75px 75px/150px 150px;
}
</style>
<div class="photo2"><img src="画像ファイルのURL" />
<div>例えばこんな事もできますね。</div>
</div>
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
