ここ何日かエントリの背景を反透過させようと色々調べたり、このサイトで質問したりしましたが、どうしてもうまくいかずに半分あきらめかけていたのですが、突然有る方法を思いついたので試してみたところ上手くいったのでご報告します。
かなり強引な方法なので他の方法を試したけど、どうしてもだめだった場合にのみ試して下さい。
で、その方法は・・・、
表示する色と透過する色を１ドット毎に並べた パレットカラーPNG （ 又は GIF ）を作ります。
例えば、２×２ピクセルで作るなら
－ ・・・ 透過する色
＋ ・・・ 残す色
－＋
＋－
といった感じで並べます、コツとしては縦横とも偶数ピクセルの画像にする事くらいです。
あとは、－ 部分の色を透過色指定して出来上がりです。
Windows付属のペイント等、透過画像を扱えないソフトで作った場合は、先日お勧めした shin's PNG Editer 等で透過色指定して下さい。
そうして出来た画像を、スタイルシートで
*1 エントリの背景に指定して
*2 リピートでタイル状に敷き詰めて
*3 背景色を消す
*1 background-image: url("画像のURL/画像のファイル名");
*2 background-repeat:repeat;
*3 background-color: none;
と指定すれば、えんとりの背景が半透明で表示されるはずです。
この方法のメリットとデメリットは
メリット
* IEを含むほとんどのブラウザでそのまま表示できる
* 上記の理由でブラウザ判定不要
* 画像の作成が簡単
デメリット
* 表示が多少重くなる
* アルファチャネルPNGと違いグラデーションに出来ない（透過色の並べ方により
近い事は出来そう）
* 複雑な背景の上に単純な画像を透過する場合には良いが逆は不可
等があります。
使い道としては、
ブログ全体の背景に１枚絵の画像を張ったサイトで、背景画像をあまり隠したくないが文字の読みやすさも確保したい。
という時によろしいのではないかと思います。
実際のカスタマイズ例としては、Riki & 悠悠 の別 blog Sweet Forest をご覧下さい。
（ 2005年6月現在立ち上げ中で、テストエントリしかありませんが。）
コメントする