どうも！LSSです！！
今日はなんだか、background-positionと格闘していて惨敗しました^^;;;
ちなみに、やろうとしているのは
こういうのなんですが、実は表示位置指定が失敗していて、ちゃんと分割されていない上に画像も端まで表示されてなかったりしますｗ
失敗しているコード
<style><!--
#gbox{
display:inline-block;
position:relative;
margin:0px;
padding:0px;
}
#m0,#m1,#m2,#m3,#m4,#m5,#m6,#m7,#m8,#m9,#m10,#m11,#m12,#m13,#m14,#m15{
position:absolute;
width:25%;
height:25%;
background-image:url(画像ファイルのURL);
background-origin:border-box;
border:13px solid;
border-color: #d0d0d080 #60606080 #20202080 #b0b0b080;
margin:0px;
padding:0px;
}
#m0{background-position:0% 0%;left:0%;top:0%;}
#m1{background-position:25% 0%;left:25%;top:0%;}
#m2{background-position:50% 0%;left:50%;top:0%;}
#m3{background-position:75% 0%;left:75%;top:0%;}
#m4{background-position:0% 25%;left:0%;top:25%;}
#m5{background-position:25% 25%;left:25%;top:25%;}
#m6{background-position:50% 25%;left:50%;top:25%;}
#m7{background-position:75% 25%;left:75%;top:25%;}
#m8{background-position:0% 50%;left:0%;top:50%;}
#m9{background-position:25% 50%;left:25%;top:50%;}
#m10{background-position:50% 50%;left:50%;top:50%;}
#m11{background-position:75% 50%;left:75%;top:50%;}
#m12{background-position:0% 75%;left:0%;top:75%;}
#m13{background-position:25% 75%;left:25%;top:75%;}
#m14{background-position:50% 75%;left:50%;top:75%;}
#m15{background-position:75% 75%;left:75%;top:75%;}
--></style>
<div id="gbox"><img src="画像ファイルのURL" width="1200" height="900" loading="lazy" title="" class="hatena-fotolife" itemprop="image" style="margin: 0px; padding: 0px;" />
<div id="m0"> </div>
<div id="m1"> </div>
<div id="m2"> </div>
<div id="m3"> </div>
<div id="m4"> </div>
<div id="m5"> </div>
<div id="m6"> </div>
<div id="m7"> </div>
<div id="m8"> </div>
<div id="m9"> </div>
<div id="m10"> </div>
<div id="m11"> </div>
<div id="m12"> </div>
<div id="m13"> </div>
<div id="m14"> </div>
<div id="m15"> </div>
</div>
この、
#m0{background-position:0% 0%;left:0%;top:0%;}
から始まる16行中の background-position の指定が「なんだかそれっぽいけど間違ってる」のは明らかで、かといって
のようにマイナス指定するとよりおかしい表示になりますｗ
px指定の時と%指定の時で、ふるまいが違うようですね。
っと、色々調べてる過程で偶然気づいたのですが↑の自分の記事、
「background-position マイナス」
ってキーワードでググるとトップに出てきました！ｗ
やったね！！^^
…最終的にはスクリプトに頼るか…^^;。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
