0

divの背景がしっかりしているクロスブラウザ（ie6 +）の半透明の境界線を実現することは可能ですか？

私が見つけたのは次のような場合だけです。

  • 境界線は半透明ですが、背景も半透明です。
  • 本体は半透明ですが、境界線は半透明ではありません。

誰かが私を正しい方向に向けることができますか、それとも別の解決策ですか？

4

4 に答える 4

4

これは、サポートする/サポートする必要のあるブラウザによって異なりますが、CSS3-rgba宣言を使用して色を定義できます（標準のrgbに追加aの-アルファ/透明チャネル）。また、背景と境界線の色によっては、background-clipプロパティを追加する必要がある場合があります。

rgba(255,255,255,.5);
background-clip:padding-box;

50％不透明な白になります。これは、色を指定できるすべての属性で機能します。

IE <= 8の（驚くべき）例外を除いて、かなりうまくサポートされています。

これがあなたのための例です：実線のbgを持つ透明な境界線。

完全を期すために：必要なbackground-clipは同じbrowsersupportを持っていますが、ここにブラウザサポートテーブルがあります

編集：

IE6 +のサポートについては、CSS3Pieを参照してください。丸みを帯びた角やVMLを介した他の色空間などのCSS3プロパティをエミュレートします。

于 2012-06-25T11:41:31.567 に答える
0

私はMSIE6でこれをうまく機能させることができました：不透明な背景を持つ半透明の境界線： 

.qm { 
    background-attachment: fixed;
    background-color: transparent;
    background-image: url("trans_paars70.png");
    padding: 1em;
}

基本的に、要素のパディングを使用して、半透明の背景画像で塗りつぶされる偽の境界線を作成します（これは、256色のパレットgifまたはpngを提供する限り、MSIE6で問題なく機能します）。

于 2012-08-14T22:20:02.087 に答える
0

サポートする必要のあるブラウザの年齢によっては、background-clipが適切なソリューションになる可能性があります。

を使用padding-boxしてから、背景色と境界線の色を必要なものに設定rgba(0,0,0,0)し、4番目の値がアルファである半透明の値に使用します。

お役に立てば幸いです:)

于 2012-06-25T11:43:23.513 に答える
0

ねえ今、あなたはこのようrgba propertiesに背景色とボーダーソリッドで慣れることができます

CSS

.parent{
    background: rgba(0,0,0,0.2);
    padding: 50px;
}

.box {
    background: #f0edcc;
    border: 24px solid rgba(0,0,0,0.3);
    padding: 10px;
    margin: 20px;
}

HTML

<div class="parent">
    <div class="box">Your message.</div>
</div>

ライブデモhttp://jsfiddle.net/gf5Fd/1/

于 2012-06-25T11:51:00.377 に答える