Edited at

stylishでcssを弄るとき、background-imageをどこから拾うか

More than 1 year has passed since last update.

【注意】素人が書いた記事です。玄人はブラウザバックしてください()。

ブラウザはchrome


問題提起

background-imageにローカルファイルを使おうとするとエラーがでる


background-img

#hoge{background-image:url("file:///C:/Users/Name/miku.png");}




Not allowed to load local resource

なにやら、ローカルのファイルにアクセスできるとやばいそうなので仕方ない

でも、しょうがないからって


background-img

/* twitter@nounoknown様の素敵なミク */

#hoge{background-image:url("https://pbs.twimg.com/media/CuaLbugUsAAz0ql.jpg:large");}

毎回こんな感じで外から拾ってくる(←☆)のは、ページの表示速度的にも、データ通信量的にも頭悪い、と思っていた


誤解

☆は、別に問題なかった

教えて!goo 同じ画像 複数回使用

つまり、何度も同じurlから同じ画像を拾ってくるというアホをしないよう、ブラウザが勝手に一度拾った画像をローカルに保存していて

css中に見覚えのあるurlが出てきたら、ローカルの画像を参照するのだそう


検証


  1. stylishで、任意のQiitaページに背景画像を挿入するスタイルを作る。

    このとき、背景画像をあとでアクセスできなくするため自分のブログなり(githubがよいかと)にアップロードしたものを指定する


  2. 適当なQiitaページにアクセスして、背景が変わったことを確認し、自分のブログから背景に指定した画像を完全に消去する


  3. PCを再起動して、閲覧したことのないQiitaページを見に行く


  4. (画像は削除したはずなのに)ちゃんと背景が変わる(変わった)



それでも

それでも最初の一回も自分のローカルに保存している、ちょー大事な画像を使いたい、ていう人は、ローカルサーバーを立てるといける

開発用ローカルサーバを立ち上げる方法

python3使うなら


http

$ cd ~

$ python -m http.server

とした後、~/Desktop/に背景としたい画像があるなら


background-img

#hoge{background-image:url("http://127.0.0.1:8000/Desktop/miku.png");}



蛇足

Qiitaの背景を変える


qiita

body{background-image: url("https://pbs.twimg.com/media/CuaLbugUsAAz0ql.jpg:large");background-size:auto;background-repeat:no-repeat;background-attachment:fixed;background-position:bottom;}

.container{background-color:rgba(255,255,255,0.6);}

このミクさん(東京アクアリウム)の画像のおすすめソース


リンク


ヒトリゴト

読んでくださってありがとうございますっっ

\def\textlarge#1{%

{\rm\Large #1}
}
\def\textsmall#1{%
{\rm\scriptsize #1}
}

(精一杯小声で)

  $\textsmall{い い ね く だ さ い !}$