0

背景の上に「暗い/透明な」テキストボックスを実装する最良の方法は何ですか (例: http://trishkhoo.com/2013/04/i-knew-exactly-how-she-felt/ )

上記のリンクに表示されている見出しを参照してください。

「私は彼女がどのように感じているかを正確に知っていました.

単純なcss/htmlでこれをどのように達成できますか?

これがこれを尋ねる適切な場所であることを願っています。Stackoverflow は、これまでの設計/開発関連の質問の頼りになる情報源でした! ありがとう。

4

3 に答える 3

3

半透明の背景色を持つ単純な DIV を意味していると思いますか?

これで試すことができます： 

.box{
    width:300px;
    height:100px;
    background-color:rgba(0,0,0,0.5); /* where 0.5 means 50% opacity */
/* and for a full compatibility on older browsers like ie7-8-9 you can use the filter property  */
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);   /* IE6 & 7 */
      zoom: 1;

}

フィドル

于 2013-04-26T19:23:06.023 に答える
2

background-color: rgba(0,0,0, 0.5) これにより、不透明度が50％のブラックボックスが作成されます

rgba は Red Green Blue Alpha の略で、その後の数字はそれらの文字に対応しています。0,0,0 は赤ゼロ、緑ゼロ、青ゼロを意味し、最後の数字は 0 - 1 の数字で、0.5 は 50% などです。

そのページで彼らが行っている方法は、透明度のある 1px x 1px の .png を使用することです。残念ながら、まったく新しい画像をストレッチ (または繰り返し) しない限り、黒の透明度を変更することはできません。RGBA を使用しても同じ結果が得られますが、色とアルファを制御できます。

于 2013-04-26T19:21:15.377 に答える
1

background-imageプロパティを使用してその効果を実現します。これは、x と y で繰り返される透過性を持つ 1x1 ピクセルの画像です。

使用した画像: http://trishkhoo.com/wp-content/themes/motion/images/blacktrans.png

rgba(r,g,b,a)画像を使用する必要はありませんが、 css 関数で色を適用するときにアルファ ファクターをサポートしていないブラウザーもあるため、これは私の意見では最良のクロスブラウザー オプションです。

于 2013-04-26T19:23:17.947 に答える