web-dev-qa-db-ja.com

背景画像なしで透明な背景を作る方法は？

divの背景を透明にしてください。
background-colorとopacityを使用してこれを実行しようとしましたが、問題は境界線と内部のテキストも透明になることです。 ここの例

透明なPNG背景画像を使用せずにこれを実現することは可能ですか？

htmlcsstransparentbackground-color
10
Misha Moroshko

子のコンテンツではなく背景の色を透明にしたい場合は、

background-color: rgba(0,0,0,.5); // Sets to 50% transparent

詳細については、このページを参照してください。これはcss3仕様であるため、すべてのブラウザーで表示されるわけではありません。

http://www.css3.info/introduction-opacity-rgba/

19
DHuntrods

はい。

セットする background-color: transparent;

opacityを使用しないでください。これにより、div全体が半透明になります。

http://jsfiddle.net/eU7By/1/ で例を更新しました

[〜＃〜] update [〜＃〜]コメント後

@DHuntrodsが言及しているように、背景色にrgbaを使用できます。 IEコースを少し調整する必要があります.. http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/

5
Gabriele Petrioli

最もクロスブラウザのソリューションは、（相対的または絶対的に配置された親の）追加の「絶対的に配置された」子要素に不透明度プロパティを使用することです：色付きの透明な背景を含めるためだけにあります。

次に、opacityプロパティを使用して、この要素を透明にすることができます。この要素には子がないため、不透明度は他の要素には影響しません。

不透明度はIE5 +のプロパティであり、使用するだけです（ http://css-tricks.com/snippets/css/cross-browser-opacity/ を参照）：

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";    /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */

jsFiddleの例を参照 http://jsfiddle.net/DUjzX/1/

コード全体は次のようになります。

HTML：

 <div class="my-cool-wrapper">
      <div class="text-and-images-on-top">
           <p>Here some content (text AND images) "on top of the transparent background"</p>
           <img src="http://i.imgur.com/LnnghmF.gif">
      </div>
      <div class="transparent-background">
      </div>
 </div>

CSS：

 .my-cool-wrapper {
      position: relative;
 }
 .my-cool-wrapper .text-and-images-on-top {
      padding: 10px 15px 19px 15px;
      z-index: 1;
      position: relative; /* needed to enable the z-index */
 }
 .my-cool-wrapper .transparent-background {
      position: absolute;
      top: 0;    
      width: 100%;
      height: 100%;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";       /* IE 8 */
      filter: alpha(opacity=10);  /* IE 5-7 */
      -moz-opacity: 0.1;          /* Netscape */
      -khtml-opacity: 0.1;        /* Safari 1.x */
      opacity: 0.1;               /* Good browsers */
      background-color: blue;
 }

続きを読む： 子要素に影響を与えずに背景画像の不透明度を設定

スクリーンショットの証拠 IE7IE8IE9IE10IE11

pS：Chrome、Firefox、Safariのスクリーンショットは追加しませんでした。これらははるかに「より良い」ブラウザです...信頼してください。これらも動作します。

1
Adrien Be

30x30の透明GIFを背景として使用する必要がありました。

background:url('absolute path here');
0
Amalgovinus