本文の内容を透明にしますが、内容のdivをページの読み込み時に不透明にします。

JQueryを使用していますが、ページの読み込み時に1つのdivを除いて本文の内容を透明にしたいとします。本文の内容を透明にしますが、内容のdivをページの読み込み時に不透明にします。

私は...

<!DOCTYPE html> 
<html> 
<head> 
<title>JQuery Query</title> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">  </script> 
<script> 
    $(document).ready(function(){ 

     $("#trans").addClass("getTransparent"); 
     $("#opaq").addClass("getOpaque"); 

     }); 
    </script> 
    <style> 

    body{ 

     background-color: #F0FFFF; 
    } 
    .myClass{ 

     height: 100px; 
     background-color: #4863A0; 

    } 
    .getTransparent{ 

     opacity: 0.3; 

    } 
    .getOpaque{ 

     opacity: 1 !important; 

    } 
    </style> 

</head> 
     <body id="trans"> 

<div id="opaq" class="col-md-6 col-md-offset-3 myClass"> 
This is supposed to be opaque to every detail... 
</div> 

     </body> 
</html>

ページの負荷をこれだけをやったが、私が望んでいた結果としています。私が不透明度を1に設定したdivを含め、ページ全体が透明になります。

これを機能させるにはどうしたらよいですか？
どんな種類のヘルプをいただければ幸いですか？

出典

2016-03-22 echology

あなたのdivは、身体の内側にあるので、それは `sが起こるので、これらは親としての不透明度0.3を取得DIV

あなたは

<body> 
    <div class="transparent"></div> 
    <div class="opaque"></div> 
</body>

、あなたが追加する必要があり、このようになり到達するために、そのようなものを作成する必要があります位置：絶対およびz-indexプロパティは、上の不透明のdivを置くためにあなたがCSSでこのハックを使用することができます

出典

2016-03-22 14:26:00

そうですね？ブートストラップモーダルは、この種のものですが。 – echology

あなたが提案したことを試してみましょう。ありがとうございました。 – echology

同じではない、私の編集を参照して、そのメインのコンテンツ上の別のdivにする必要がありますこの場合は、100％の高さと幅を持つ新しいレイヤーを追加します。 /tympanus.net/codrops/2013/11/07/css-overlay-techniques/ –

透明：

background-color: rgba(72,99,160,0.3);//#4863A0;

ここをクリックhttps://jsfiddle.net/bw08dv7g/

出典

2016-03-22 14:37:45 Greg

私は不透明で何かをしなければなりません。これは背景色を変えるだけです。 – echology

返信いただきありがとうございます。 – echology

本文の内容を透明にしますが、内容のdivをページの読み込み時に不透明にします。

答えて

関連する問題