半透明の背景って、なんか魅力的ですよね。ってことで、手っ取り早くやるには以下のようなCSSを書けばOK。
<style type="text/css">
#translucent {
opacity: 0.5;
-moz-opacity: 0.5;
filter:alpha(opacity = 50);
}
</style>opacityはCSS3に対応しているOperaとかSafari用。-moz-opacityはFirefox。filterはIE用。
で、これらを使いたくない人っていうのは、The W3C CSS Validation ServiceでValidがいい！っていう人たちだと思うんだけど(というかそれ以外理由が見つからない)、じゃあJavaScriptで！ってことになったとして、上記のコードをJavaScriptで書きたいと思う人っていうのは、つまりJavaScriptで何かを半透明にしたいと思っている人で、そんな中Googleで「JavaScript 半透明」とかで検索しても、上位に出てくるページはイベントハンドラばっかり。もうこれ書けばずっとこの要素は半透明だよ！的なコードが書いてあるページが出てきてもいいのに。ということで書く。
window.onload = function() {
var translucentElement = document.getElementById('translucent');
translucentElement.style.opacity = 0.5;
translucentElement.style.MozOpacity = 0.5;
translucentElement.style.filter = 'alpha(opacity = 50)';
};ロードが完了したら"translucentElement"という変数に"translucent"というIDの要素をぶち込んで、それぞれスタイルを適用させるという処理。説明はてきとー。以下サンプル。
<script type="text/javascript">
window.onload = function() {
var translucentElement = document.getElementById('translucentBg');
translucentElement.style.opacity = 0.5;
translucentElement.style.MozOpacity = 0.5;
translucentElement.style.filter = 'alpha(opacity = 50)';
};
</script>
<div id="translucentBg" style="margin:1em;padding:1em;height:100px;background-color:#000000;">
Sample(Background)
</div>とりあえずこんな感じで。
ホントはこれをCSSごとに使い分けたかったのだけど、「@import JavaScript」とかでググると、一つのJSファイルにdocument.writeでJSファイルを読み込ませると、「@importみたいに」いろいろ読み込めるよ！的な記事が出てくる。@import url("hoge.js");みたいな記述ができればいいのだけど。と思っていろいろ探してたら、JSSなるものが昔はあったらしい。
