半透明の背景を作成するにはどうすればよいですか？

他に影響を与えずに白い背景を50％透明にする必要があります。どうすればいいのですか？

使用rgba()：

.transparent {
  background-color: rgba(255,255,255,0.5);
}

これにより、ボックスのコンテンツは100％の不透明度を維持しながら、50％の不透明度が得られます。

を使用するopacity:0.5と、コンテンツだけでなく背景もフェードされます。したがって、使用しないでください。

これは機能しますが、このクラスを持つ要素のすべての子も透明になり、これを防ぐ方法はありません。

.css-class-name {
    opacity:0.8;
}

透明な背景を灰色にしたい場合、plsは次のことを試みます。

   .transparent{
       background:rgba(1,1,1,0.5);
   }

知っておきたい

一部のWebブラウザーでは、透明な背景の上に影のあるテキストをレンダリングすることが困難です。次に、半透明の1x1 PNG画像を背景として使用できます。

注意

IE6はPNGファイルをサポートしていないことに注意してください。

1x1の半透明のPNGは使用しないでください。PNGのサイズを最大10x10、100x100などに設定します。ページで意味のあるものは何でもかまいません。（私が使用したのは200x200のPNGで、サイズは0.25 kbしかなかったので、ここではファイルサイズに特に問題はありません。）

この投稿にアクセスした後、3つの1x1 PNGで透明度を変えたWebページを作成しました。

Dreamweaver CS5は急上昇していました。私はDOSにフラッシュバックしていました!!! どうやら私がスクロール、テキストの挿入、基本的に何でもしようとしたときはいつでも、DWは一度に1x1ピクセルの半透明領域をリロードしようとしていました...

アドビの技術サポートは問題が何であるかさえ知りませんでしたが、ファイルを再構築するように私に言いました（偶然、彼らのシステムで動作しました）。最初の透明なPNGをcssファイルにロードしたときだけ、ドキュメントが再び深くなります。

次に、PNGがDreamweaverをクラッシュさせることについて、別のヘルプサイトに投稿を見つけました。PNGのサイズを大きくします。そうすることの欠点はありません。

日付は付けられていますが、このスレッドで1つの回答を普遍的に使用することはできません。rgbaを使用して透明なカラーマスクを作成する-これは、背景画像を使用して行う方法を正確に説明していません。

私のソリューションは、背景画像またはカラー背景で機能します。

#parent {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 19px;
    text-transform: uppercase;
    border-radius: 50%;
    margin: 20px auto;
    width: 125px;
    height: 125px;
    background-color: #476172;
    background-image: url('https://unsplash.it/200/300/?random');
    line-height: 29px;
    text-align:center;
}

#content {
    color: white;
    height: 125px !important;
    width: 125px !important;
    display: table-cell;
    border-radius: 50%;
    vertical-align: middle;
    background: rgba(0,0,0, .3);
}

<h1 id="parent"><a href="" id="content" title="content" rel="home">Example</a></h1>

div.main{
     width:100%;
     height:550px;
     background: url('https://images.unsplash.com/photo-1503135935062-
     b7d1f5a0690f?ixlib=rb-enter code here0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cf4d0c234ecaecd14f51a2343cc89b6c&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb') no-repeat;
     background-position:center;
     background-size:cover 
}
 div.main>div{
     width:100px;
     height:320px;
     background:transparent;
     background-attachment:fixed;
     border-top:25px solid orange;
     border-left:120px solid orange;
     border-bottom:25px solid orange;
     border-right:10px solid orange;
     margin-left:150px 
}

これを試して：

.transparent
{ 
  opacity:.50;
  -moz-opacity:.50; 
  filter:alpha(opacity=50); 
}