Category Archives: CSS

CSSで半透明表示

 背景画像に文字を重ねる時、その背景を半透明色にして読みやすくする方法です。

 背景画像を直接画像処理してもいいのですが、CSSで定義することにより、より柔軟な使い方が出来ると思います。

半透明

<div id="textBack"></div>
<div id="text">
<p>レバ刺しは今日入荷したばかりということで、いつにも増してフルフルの食感で香りも良く、これまた最高。</p>
<p>クラゲは私の大好物なのですが、ここのはいつもの「ひも」のようなのとは違い、2センチ四方位の板状でした。<br />この食感が最高でした。そして控えめの酢とダシ、おろしキュウリで作ったかけ汁に味付けの素晴らしいこと。さすがです。</p>
<p>大降りの"のどぐろ"はほどよく脂が乗って、しっとりとした白身には旨みがたっぷり。実に美味しい魚でした。</p>
</div>
</div>

;

#photo {
height: 480px;
width: 640px;
background: url(backimage.jpg) no-repeat;
margin-right: auto;
margin-left: auto;
}
#photo #textBack {
height: 480px;
width: 200px;
background: #fff;
filter:alpha(opacity=50);
opacity:0.5;
float: left;
}
#photo #text {
position: relative;
left: -200px;
height: 460px;
width: 180px;
padding: 10px;
font: 14px "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", Arial, Helvetica, sans-serif;
float: left;
}
  • デモ
  • プロパティーの対応(いずれも50%透過を意味しています)

filter:alpha(opacity=50);
 →IE7(Win)
opacity:0.5;

 →firefox3(Win、Mac)、Opera9(Win)、Safari3(Mac)Chrome(Win)

 

firefoxのみに効くCSSハック

ページを作っていて、どーしてもfirefoxでだけ1ピクセルずれる減少に悩まされ、firefoxだけに適用されるCSSハックを探したのですが、これが意外とありませんでした。

「:-moz-broken」などのfirefoxでしか使えない”独自実装擬似クラス”をセレクタに混ぜ込むことによってfirefoxでしか適用されないCSSを定義するという記事もありました。

div#menu, x:-moz-any-link { STYLE }

しかしこれがIE7にもどうやら適用されてしまうようなのです。

そこで、最初にfirefoxのスタイルを書き、さらにそれ以外のブラウザのスタイルを書くことで何とか解決しました。

SELECTOR { STYLE }/*firefox用*/
*:first-child+html SELECTOR { STYLE }/*IE7用*/
* html  SELECTOR { STYLE } /*〜IE6用*/
body:first-of-type  SELECTOR { STYLE }/*Safari and Opera用*/

うーん、こんなのでいいのかしら(^.^;)

でもこれで

WindowsIE6、IE7、Opera9.6、Firefox3

MacFirefox3、Safari3

では大丈夫でした。