CSS RGBAボーダー/背景アルファダブル

StackOverflow https://stackoverflow.com/questions/2626039

  •  26-09-2019
  •  | 
  •  

質問

私は関与して透明性をたくさん持っているウェブサイト上で働いている、と私はIE用のフォールバックをRGBAで完全にそれを構築してからやろうと思いました。私は外側の境界線が丸みを帯びていると、それが取り囲んボックスの背景よりも少ない不透明である「facebox」スタイルのボーダー効果を、必要があります。

http://24ways.org/2009/working-with-から最後の例RGBA色にはそれが可能だと示唆しているようだが、私は仕事にそれを得るように見えることはできません。

：私は次のことをしようとすると 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title>RGBA Test</title>
 <style type='text/css'>
   body {
     background: #000;
     color: #fff;
   }
   #container {
     width: 700px;
     margin: 0 auto;
     background: rgba(255, 255, 255, 0.2);
     border: 10px solid rgba(255, 255, 255, 0.1);
     padding: 20px;
   }
  </style>
</head>
<body>
  <div id='container'>
    This should look like a facebox.
  </div>
</body></html>

これは、背景のように思える一緒に加え取得する画素値を引き起こす要素の境界の下に「延び」。背景と境界の両方が半透明である場合にこのように、境界は常に素子のバックグラウンドよりも不透明であろう。これはまさに私が達成しようとしているものの反対であるが、それは私が見てきた例に基づいて可能なはずのように思える。

また、私はまた、彼ら場合は丸みを帯びた角、およびWebKitの正方形の子要素の角を取得するには、コンテナの上にボーダー半径を使用するつもりですので、私は、コンテナ内の他の要素を使用できないことを追加する必要があります本質的に正方形の内容に丸みを帯びた外側の境界線を意味しており、割り当てられたバックグラウンドを持っています。

申し訳ありませんが、私はこれの画像を投稿することができない...どうやら私はイメージを掲載するのに十分な担当者を持っていません。

役に立ちましたか？

解決

あなたは、これが軌道に乗るために新しいbackground-clip: padding-box;プロパティを使用することができます。背景が箱の中に開始する必要がどこからそれが計算されます。 詳細および例については、チェックここを

他のヒント

Firefoxでのテストこれは、あなたが記述するもの確認 - そしてそれは、このの意味を実現するために私に少し時間がかかりました！ （あなたが言うように）ボーダーが添加物であるため、少ない透明の境界線を持つことは、その下に透明な背景には影響を与えません。

その場合、あなたはそれ以上のアルファよりもあなたが後にしている効果と色の仕事をシミュレートする必要があります：

background: rgba(128, 128, 128, 0.7);
border: 10px solid rgba(0, 0, 0, 0.1);

これを試してみてください 

#container {
    width: 700px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.2);
    border: 10px solid rgba(255, 255, 255, 0.1);
    padding: 20px;

    /* and here is the fix */
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top