CSS：複数の問題。不透明度は、テキスト、および適切な場所でのdivない

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Title</title> 

     <meta http-equiv="content-type" content="text/html; charset=utf-8"> 

     <style type="text/css"> 
      body { 
       background: #00BFFF; 
       font-family: "Candara"; 
       src: url(data/candara.ttf); 
      } 

      #wrapper { 
       margin: 0 auto; 
       width: 800px; 
       padding: 15px; 
      } 

      #wrapper:after { 
       content: "."; 
       display: block; 
       clear: both; 
       height: 0; 
       overflow: hidden; 
      } 
       #header { 
        display: block; 
        background-color: blue; 
       } 
        #header .left { 
         display: inline-block; 
         padding: 15px 25px; 
         float: left; 
        } 

         #header .left h1{ 
          display: inline-block; 
          font-weight: bold; 
         } 

        #header .right { 
         float: right; 
         display: inline-block; 
        } 

         #header .right span{ 
          display: block; 
         } 

       #page { 
        display: block; 
        float: left; 
       } 

       #page .box{ 
        display: inline-block; 
        background: black; 
        float: left; 
       } 

       #header, .box { 
        background: blue; 
        opacity: 0.7; 
       } 
     </style> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div id="header"> 
       <div class="left"> 
        <h1>Title</h1> 
       </div> 

       <div class="right"> 
        <span><b>needle:</b> <?php //echo $haystack; ?></span> 
        <span><b>needle:</b> <?php //echo $haystack; ?></span> 
        <span><b>Last update:</b> <?php //echo $lastupdate; ?></span> 
       </div> 
      </div> 

      <div id="page"> 
       <div class="left box"> 
        Heey mannn 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

にこれはを目指して設計イムですが、そのはまったく機能していない、その代わり、私はthis.

を取得し、私はしません私が間違っていることを知っている、私は本当にしない。みんな助けてくれますか？私が欲しいものはすべてイメージに含まれています。そして、赤い部分は、それらの箱が欲しいというマークにすぎません。何かが不明である場合I also made a jsfiddle with the code.、説明するために、その本当に難しいので、あなたが透明な背景をしたい場合は、...、代わりにそれをダウンサミングだけで、

出典

2011-11-12 Thew

不透明度の全体的な透明度を変更しますLEICiCが言ったように、バックグラウンド用の要素を含め、要素にはRGBAの背景色のようなものが必要ですhttp://css-tricks.com/2151-rgba-browser-support/ – leopic

.. gif 1px * 1px X％透明な画像を背景として設定（繰り返し）してtを達成する彼は効果的です。これらの複雑な結果をより速く達成するために、グリッドシステムをチェックアウトしたいと思うかもしれません –

をコメントをしてください残しrgbaまたはhsla色を使用。

例：

background-color: rgba(0, 0, 255, 0.7); /* Blue, opacity 0.7*/

出典

2011-11-12 15:26:40

ここでは、あなたのデザインイメージを持っているものをレンダリングするコードは、です。 Chromeでのみテストされています。これは最適ではなく、最適化されたソリューションですが、設計を続ける必要があります。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Title</title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 

    <style type="text/css"> 
     * { 
      margin: 0px; 
      padding: 0px; 
     } 

     body { 
      background: #00BFFF; 
      font-family: "Candara"; 
      src: url(data/candara.ttf); 
     } 

     #wrapper { 
      margin: 0 auto; 
      width: 800px; 
     } 

     #header { 
      width: 720px; 
      height: 100px; 
      margin-top: 20px; 
      padding: 10px 40px; 
      background: rgba(0, 0, 255, 0.7); 
      -webkit-border-radius: 13px; 
      border-radius: 13px; 
     } 

     .title_area { 
      float: left; 
      width: 300px; 
      margin-top: 12px; 
      padding: 25px 25px; 
      background: #f00; 
      -webkit-border-radius: 13px; 
      border-radius: 13px; 
     } 

     #header .info_area { 
      float: right; 
      width: 200px; 
      height: 60px; 
      margin-top: 30px; 
      padding: 5px; 
      background: #f00; 
      -webkit-border-radius: 13px; 
      border-radius: 13px; 
     } 

     #page { 
      clear: both; 
      margin: 20px 0px; 
     } 

     .content { 
      float: left; 
      width: 380px; 
      height: 500px; 
      padding: 20px; 
      background: rgba(0, 0, 255, 0.7); 
      -webkit-border-radius: 13px; 
      border-radius: 13px; 
     } 

     .up_right { 
      float: left; 
      width: 320px; 
      height: 240px; 
      margin-left: 20px; 
      margin-bottom: 20px; 
      padding: 20px; 
      background: rgba(0, 0, 255, 0.7); 
      -webkit-border-radius: 11px; 
      border-radius: 11px; 
     } 

     .down_right { 
      float: left; 
      width: 320px; 
      height: 200px; 
      margin-left: 20px; 
      padding: 20px; 
      background: rgba(0, 0, 255, 0.7); 
      -webkit-border-radius: 11px; 
      border-radius: 11px; 
     } 

     .close { 
     clear: both; 
     } 
    </style> 
</head> 

<body> 
    <div id="wrapper"> 
     <div id="header"> 
      <div class="title_area"> 
       <h1>Title</h1> 
      </div> 

      <div class="info_area"> 
       <div><b>needle:</b> <?php //echo $haystack; ?></div> 
       <div><b>needle:</b> <?php //echo $haystack; ?></div> 
       <div><b>Last update:</b> <?php //echo $lastupdate; ?></div> 
      </div> 
     </div> 

     <div id="page"> 
      <div class="content"> 
       Heey mannn 
      </div> 

      <div class="up_right"> 
       Hou hou 
      </div> 

      <div class="down_right"> 
       Yeah 
      </div> 
      <div class="close"></div> 
     </div> 
    </div> 
</body> 
</html>

出典

2011-11-12 16:16:03

RGBAはそれだけではなく、不透明度の、これを試してみてくださいクロスブラウザの問題だけでなく

かもしれません良い解決策ですが、：0.7

opacity: 0.7; 
-moz-opacity: 0.7; 
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);

出典

2011-11-12 19:52:34 Ananth

CSS：複数の問題。不透明度は、テキスト、および適切な場所でのdivない

答えて

関連する問題