0

私はワードプレスのサイトを持っていて、全画面の背景画像と、半透明の背景で不透明なテキストを持つ 2 つの小さなレスポンシブで中央のフレーム (div?) を持つウェルカム ページを作成したいと考えています。カーソルが div の上にあるとき、このウェブサイトのように完全に不透明にしたい: http://www.newzealand.com/

初心者として、今のところテキストを含むpngを使用しましたが、もちろんテキストも半透明に変わります...ここに私のウェブサイトがあります：http://vincentfournet.fr/

どうもありがとう

4

1 に答える 1

0

div.rgba() の背景スタイルを変更すると、透明度が得られます。:hover 疑似要素を使用します。(IE6 は :hover on div をサポートしていません。古いブラウザーのユーザーに対応する必要がある場合は、javascript を使用して互換性を実現できます)

<div class='container'>
  <div id='div1'> TEXT HERE </div>
  <div id='div2'> NORE TEXT </div> 
</div>
//css, other styles ommited
#div1:hover, #div2:hover {background: rgba(0,0,0,0.95);} /*95% opaque*/
.container {background: rgba(0,0,0,0.7);}

うまくいくと思います。ここにデモがありますhttp://jsfiddle.net/2Rpps/

于 2013-06-16T11:27:04.523 に答える