画像の詳しい設定-I 〜background-repeat〜 ページ7
##
画像を使ったCSSを見てみると、
“background-repeat”
“background-size”
“background-position”
というものを設定しています。
上から順に、
背景画像を繰り返し並べるかどうか、
背景画像の大きさ、
背景画像の表示する位置、
というものを決めています。
{background-repeat:〜〜;} の〜〜のところには、以下のものが使えます。
・no-repeat
(画像を繰り返さず、一枚だけ貼る)
画像を並べた時、つなぎ目が見えてしまう画像におすすめ。
ただ、画像のサイズが小さいときは、画像を使いたいところ全体にしくことができないので、
background-size:cover;などと入れる必要があります。
・repeat
(画像を縦、横に繰り返す)
何も設定しない場合、このように敷き詰められます。はみ出た部分はカットされます。
・repeat-x
(画像を横だけに繰り返す)
縦に長い画像をしくときにおすすめ。ただ、縦の長さが足りない時は下が見えてしまったり、白になってしまいます。
この場合、background-size:cover;を加えるか、背景色を設定します。
・repeat-y
(画像を縦だけに繰り返す)
横に長い画像をしくときにおすすめ。こちらも、横の長さが足りないと下が見えてしまったり、白になってしまいます。
この場合も、background-size:cover;を加えるか、背景色を設定します。
・round
(画像を縦、横に繰り返す)
no-repeatとrepeatの中間みたいな感じ。
縦幅と横幅がぴったりになるように大きさを大きくしたり小さくしたりして敷き詰めてくれます。
また、２つの値で指定することもできます。１つ目が横、２つ目が縦です。
{background-repeat: repeat no-repeat;}
とすると、repeat-xと同じ表示になります。詳しく指定したい方は使ってみてください。
もし、もっと知りたい!と思ったら、調べてみるといいかと思います。
⚠全て使えるか確認中です⚠
よくわかんないよ、と思った方。
こちらで、実際に見本を見ることができます。ちなみに、このサイトでは、spaceという設定も紹介されていますが、占いツクールでは使えないことを確認しています。
それでもよくわからない、という方は、シームレスという、つなぎ目がわからない素材を探してみてくださいね。
##
画像の詳しい設定-�� 〜background-size〜→←スクロールのやり方
この小説をお気に入り追加 (しおり)
登録すれば後で更新された順に見れます 132人がお気に入り
お気に入り作者に追加
この作品を見ている人にオススメ
この作品を見ている人にオススメ
「CSS」関連の作品
違反報告 - ルール違反の作品はココから報告感想を書こう！(携帯番号など、個人情報等の書き込みを行った場合は法律により処罰の対象になります)
さくさく - 参考にさせていただきます。ありがとうございます！ (12月13日 19時) (
レス) id: 8125d01b3c (このIDを非表示/違反報告)
青い鳥 - 参考にさせてもらいました。関係ないんですけど１００票目に評価しました (10月17日 17時) (レス) @page27 id: 55adadd6b3 (このIDを非表示/違反報告)
ぽんきち丸ドリーム号(プロフ) - 参考にさせていただきました、、！ありがとうございます！！ (7月10日 9時) (レス) @page27 id: 2431247bf4 (このIDを非表示/違反報告)
雨の緑茶。(プロフ) - ゆゆゆ。さん» 失礼します。em7様とは関係のない者ですがご回答させていただきます。もう解決されているかなと思いますが、一応https://uranai.nosv.org/u.php/novel/hetadesum4/の「画像のサイズ変更」ページに載っているかと。 (2023年3月17日 14時) (レス) id: 2f0ba08fc2 (このIDを非表示/違反報告)
おはぎ(砂糖・おはぎサブ垢) - 参考にさせていただきました (2022年11月27日 11時) (レス) @page35 id: dfee7c88d4 (このIDを非表示/違反報告)
作品は全て携帯でも見れます
同じような小説を簡単に作れます → 作成
この小説のブログパーツ
