2004年07月04日
スタイルシートで背景透過
ｃｓｓのお話 に、さらにもう少し追記です。
実は、「伊豆の登り子 」さんの記事では、
伊豆の登り子: 記事タイトルの装飾
記事そのものも、もう少し工夫の余地はあるのですが、背景画像の下半分をもっと白く飛ばしてしまえばいいかな。
と書かれてたんですね。
実際には、私なんかから見せて頂くと、つーとん さんのブログは、大変美しい写真が、しかも綺麗にグラデーションされていて素敵だなぁ、と思うのですが、ご本人さんは更に美しくされたいとご希望なのでしょう。
で、今日コメントのお返事を書こうとした時に、ふと「クマのひとりごと 」さんのところに、
クマのひとりごと: 倉木麻衣のウェブログ
本文の背景がトランスルーセントになっているのが気になったのでスタイルシートを拝見しましたが、containerに「filter:alpha(opacity=85);」を追加すれば良いんですね。 ※Operaでは無視されちゃいます。
という記事があったのを、さっき思い出してしまいました。
それで「もう少し詳しい記事は無いか」と多少検索もしてみて、「TAG Index：スタイルシート/フィルタ/半透明のグラデーションをかける」辺りも参考にしてみると、つーとん さんの場合、「http://twoton.way-nifty.com/weblog/mystyles.css」ファイルの「#center」のところ辺りを、
#center {
filter: alpha(style=0, opacity=70);
float: left;
width: 501px;
background-color: #FFFFFF;
background-image: url(http://twoton.way-nifty.com/weblog/image/center.jpg);
background-position: left top;
background-repeat: no-repeat;
overflow: hidden;
}というふうに変更されると今以上に「透過」した感じになるかも知れないなぁ、と思ったのです。（２行目を追記してあります。opacity=70 の数字を小さくすると、より「白っぽく」出来ますが、文字まで薄くなるので、あまり意味がありません。）
あ、但し、
TAG Index：スタイルシート/フィルタ/フィルタのサンプル一覧
※未対応のブラウザでは、レイアウトが乱れる場合があります。
との事ですから、当然ですが、いろいろ充分にテストをされてから適応された方が良いのは言うまでもありませんので、念のため。（実際、中央部分だけ白っぽくてもあまり美しくもないかも知れないですし。）
それから、今日の記事は、あくまで、私自身が、将来的にデザインの変更をしたい場合などの「備忘録」代わりに書いてみた物ですので、誤解されませぬようお願い致します。（つまり、押しつけるような気は全くありません、という事です。）
投稿者 savabigi : 2004年07月04日 02:45 | [ ウェブログ・ココログ関連 ]
トラックバック
このエントリーのトラックバックURL:
http://savabigi.x0.com/mt3/mt-tb.cgi/119
コメント
いろいろな技があるのですね。勉強になります。当方のデザインで一番面倒なのは、写真本来の色調をキープしつつ、文字もちゃんと表示できるようにグラデーションをかけることで、毎回悩んでいます。
このフィルター機能、面白そうですね。
投稿者 つ一とん : 2004年07月04日 20:56
つーとん さん、こんばんは。
> 当方のデザインで一番面倒なのは、写真本来の色調を
> キープしつつ、文字もちゃんと表示できるように
> グラデーションをかけることで、毎回悩んでいます。
なるほど。ほんと、画像処理も、スタイルシートも奥が深いですよね。「答え」が一つじゃないし、「目標」みたいな物も人それぞれですしね。
私も色々ボチボチ勉強中です。
投稿者 ココの管理人 : 2004年07月10日 21:45