試圖讓我的背景圖像透明

Question

這裏是CSS代碼的一部分，我似乎無法弄清楚。

#About{ 
      height:500px; 
      background: url("murano.jpg") no-repeat center; 
    } 

我要減少進口的背景圖像的透明度

Answer 1

添加不透明度與你的CSS

#About{ 
      opacity :0.4; 
      height:500px; 
      background: url("murano.jpg") no-repeat center; 
    } 

Answer 2

最好的解決辦法是創建#about股利和位置內的另一個DIV該div絕對同時將#about div放在相對位置，並將此新添加的div的背景設置爲rgba（0,0,0,0.5），其中0.5表示不透明度

沒有css規則爲背景圖像提供不透明度。 當你把#about div的不透明度，當然0.4的孩子將繼承該物業約格內的任何文本將獲得0.4

<div id="about"> 
<div class="absolute"> 
</div> 
</div> 

#about{ 
position:relative; 
background:url(..); 
} 
.absolute{ 
position:absolute; 
background:rgba(0,0,0,0.5); 
} 

Answer 3

透明度使用background-color: rgba(255, 255, 0, 0.3);

的0.3作爲該alpha（不透明通道）。

OR

添加一個額外的div持有的背景，並改變不透明度那裏。

opacity: 0.4; filter:alpha(opacity=40);

例子：

#background { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url('http://i40.tinypic.com/3531bba.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-size: 100%; 
 
    opacity: 0.4; 
 
    filter: alpha(opacity=40); 
 
} 
 
.head { 
 
    width: 150px; 
 
    height: 160px; 
 
} 
 
body { 
 
    font-family: tahoma, helvetica, arial, sans-serif; 
 
    font-size: 12px; 
 
    text-align: center; 
 
    background: #000; 
 
    color: #ddd4d4; 
 
    padding-top: 12px; 
 
    line-height: 2; 
 
} 
 
td, 
 
th { 
 
    font-size: 12px; 
 
    text-align: left; 
 
    line-height: 2; 
 
} 
 
#wrapper { 
 
    margin: auto; 
 
    text-align: left; 
 
    width: 832px; 
 
    position: relative; 
 
    padding-top: 27px; 
 
} 
 
#body { 
 
    background: url(images/body_bg_1.gif) repeat-y; 
 
    width: 832px; 
 
} 
 
#bodyi { 
 
    background: url(images/body_top_1.gif) no-repeat; 
 
    width: 832px; 
 
} 
 
#bodyj { 
 
    background: url(images/body_bot_1.gif) bottom no-repeat; 
 
    padding: 1px 0; 
 
} 
 
#body2 { 
 
    background: url(images/body_bg_2.gif) repeat-y; 
 
    width: 832px; 
 
} 
 
#bodyi2 { 
 
    background: url(images/body_top_2.gif) no-repeat; 
 
    width: 832px; 
 
} 
 
#bodyj2 { 
 
    background: url(images/body_bot_2.gif) bottom no-repeat; 
 
    padding: 1px 0; 
 
} 
 
h1, 
 
h2, 
 
h3, 
 
#nav, 
 
#nav li { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#nav { 
 
    font-size: 10px; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 12px; 
 
    line-height: 1.2; 
 
    padding-left: 120px; 
 
} 
 
#nav li { 
 
    float: left; 
 
    width: 108px; 
 
    list-style: none; 
 
    margin-left: 2px; 
 
    border-bottom: 1px solid black; 
 
} 
 
#nav a { 
 
    background: #738d09; 
 
    color: #2e3901; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: center; 
 
    padding: 1px 0; 
 
} 
 
#sidebar { 
 
    float: left; 
 
    width: 250px; 
 
    padding-left: 4px; 
 
} 
 
#sidebar .content { 
 
    padding-left: 24px; 
 
} 
 
#sidebar .content img { 
 
    float: left; 
 
    clear: left; 
 
    margin: 5px 5px 5px 0; 
 
} 
 
#sidebar .divider { 
 
    background: url(images/left_splitter.gif) center no-repeat; 
 
    height: 5px; 
 
    width: 169px; 
 
} 
 
#content { 
 
    float: right; 
 
    width: 462px; 
 
} 
 
#content1 { 
 
    float: left; 
 
    width: 800px; 
 
} 
 
#content1 .content { 
 
    margin: 7px 35px 7px 20px; 
 
    padding-left: 20px; 
 
} 
 
#content .content { 
 
    margin: 7px 55px 7px 17px; 
 
} 
 
#content .content table { 
 
    width: 310px; 
 
    margin-right: 0px; 
 
} 
 
#content .content table td, 
 
#content .content table th { 
 
    padding-right: 10px; 
 
} 
 
#content .content table td.download { 
 
    text-align: right; 
 
    padding-right: 0px; 
 
} 
 
#content .divider { 
 
    background: url(images/right_splitter.gif) repeat-x; 
 
    height: 5px; 
 
} 
 
h1 { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
h2 { 
 
    font-size: 10px; 
 
    color: #cf9118; 
 
    margin: 1em 0; 
 
} 
 
h3 { 
 
    font-size: 10px; 
 
    margin: 1em 0; 
 
} 
 
h5 { 
 
    font-size: 20px; 
 
    color: #cf9118; 
 
    margin: 1em 0; 
 
    text-align: center; 
 
} 
 
h6 { 
 
    font-size: 18px; 
 
    margin: 1em 0; 
 
} 
 
p { 
 
    margin: 1em 0; 
 
} 
 
img { 
 
    border: 0; 
 
} 
 
img.left { 
 
    float: left; 
 
    margin-right: 14px; 
 
} 
 
img.right { 
 
    float: right; 
 
    margin-left: 14px; 
 
} 
 
.readmore { 
 
    text-align: right; 
 
} 
 
.hidden { 
 
    visibility: hidden; 
 
} 
 
.clear { 
 
    clear: both; 
 
} 
 
a { 
 
    color: #f0b33c; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
} 
 
a:visited { 
 
    color: #cf9118; 
 
} 
 
a:hover { 
 
    text-decoration: underline; 
 
} 
 
table a { 
 
    text-decoration: underline; 
 
    font-weight: normal; 
 
    color: #7f7c79; 
 
} 
 
#power { 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 
#power a { 
 
    color: #fff; 
 
}

<div id="background"></div> 
 
<div class="head"> 
 
</div> 
 
<div id="wrapper"> 
 
    <ul id="nav"> 
 
    <li><a href="index.htm">Inicio</a> 
 
    </li> 
 
    <li><a href="sobre.htm">Sobre a banda</a> 
 
    </li> 
 
    <li><a href="membros.htm">Membros</a> 
 
    </li> 
 
    <li><a href="bilhetes.htm">Bilhetes</a> 
 
    </li> 
 
    <li><a href="galeria.htm">Galeria</a> 
 
    </li> 
 
    <li><a href="areapessoal.php">Área Pessoal</a> 
 
    </li> 
 
    </ul> 
 
    <h1><a href="index.htm"></a></h1> 
 
    <div id="body"> 
 
    <div id="bodyi"> 
 
     <div id="bodyj"> 
 
     <div id="sidebar"> 
 
      <div class="content"> 
 
      <h2>Galeria de imagens</h2> 
 
      <p>Aqui poderá encontrar uma galeria de imagens da banda, com fotos de concertos, entre outras imagens.</p> 
 
      <p class="readmore"><a href="galeria.htm">Ver</a> 
 
      </p> 
 
      </div> 
 
      <div class="content"> 
 
      <h2>Noticias</h2> 
 
      <h3>18 de Abril, 2011</h3> 
 
      <h4>"So Far Away" vai ter videoclip</h4> 
 
      <p>Muitos se questionavam se o mais recente single dos Avenged Sevenfold, "So Far Away", ia ter direito a um videoclip. Eis que surge a boa notícia para os fãs dos A7X: So Far Away vai ter videoclip. Já foram divulgadas algumas fotos do set de 
 
       filmagens.</p> 
 
      <h3>10 de Março, 2011</h3> 
 
      <h4>A7X nomeados para a Metal Hammer Golden Gods Awards 2011</h4> 
 
      <p>Os Avenged Sevenfold foram nomeados para a Metal Hammer Golden Gods Awards 2011 em duas categorias. As categorias onde os A7X estão a participar são as seguintes: 
 
       <p> 
 
       - Best International Band (Melhor Banda Internacional) 
 
       <p> 
 
        - Best Shredder (com o Synyster Gates) (Melhor Shredder)</p> 
 
      </div> 
 
     </div> 
 
     <div id="content"> 
 
      <center> 
 
      <img src="images/avengeds.jpg" width="346" height="234" alt="four men walking" /> 
 
      </center> 
 
      <div class="content"> 
 
      <h2>O album mais recente</h2> 
 
      <img src="images/nightmare.jpg" width="82" height="80" alt="Unwired album cover" class="left" /> 
 
      <p>Os californianos Avenged Sevenfold estão de volta aos discos com "Nightmare". Solos de guitarra, vocalizações rasgadas e um som contagiante continuam a ser a base do sucesso de uma das bandas de heavy-metal com mais fãs no mundo inteiro. Fundados 
 
       em 1999 por M. Shadows, Synyster Gates, Zacky Vengeance, Johnny Christ e The Rev - baterista que faleceu em Dezembro de 2009 passado e que foi substituido neste disco por Mike Portnoy, dos Dream Theater - os Avenged Sevenfold já contam com 
 
       cinco discos de originais na sua carreira.</p> 
 
      <div class="divider"></div> 
 
      <h2>Musicas com maior sucesso</h2> 
 
      <table summary="track downloads" border="0" cellspacing="0"> 
 
       <tr> 
 
       <th width="55%">Faixa</th> 
 
       <th>Album</th> 
 
       <th class="hidden">Dowload links</th> 
 
       </tr> 
 
       <tr> 
 
       <td>Bat Country</td> 
 
       <td>City of Evil</td> 
 
       <td class="download"><a href="http://www.youtube.com/watch?v=IHS3qJdxefY">Ouvir</a> 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td>Beast and the Harlot</td> 
 
       <td>City of Evil</td> 
 
       <td class="download"><a href="http://www.youtube.com/watch?v=7bDg7n-chhU">Ouvir</a> 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td>Seize the Day</td> 
 
       <td>City of Evil</td> 
 
       <td class="download"><a href="http://www.youtube.com/watch?v=jUkoL9RE72o">Ouvir</a> 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td>Almost Easy</td> 
 
       <td>Avenged Sevenfold</td> 
 
       <td class="download"><a href="http://www.youtube.com/watch?v=Fi_GN1pHCVc">Ouvir</a> 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td>Afterlife</td> 
 
       <td>Avenged Sevenfold</td> 
 
       <td class="download"><a href="http://www.youtube.com/watch?v=HIRNdveLnJI">Ouvir</a> 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td>Nightmare</td> 
 
       <td>Nightmare</td> 
 
       <td class="download"><a href="http://www.youtube.com/watch?v=94bGzWyHbu0">Ouvir</a> 
 
       </td> 
 
       </tr> 
 
       <tr> 
 
       <td>Welcome to the Family</td> 
 
       <td>Nightmare</td> 
 
       <td class="download"><a href="http://www.youtube.com/watch?v=1OZs7IoWTvc">Ouvir</a> 
 
       </td> 
 
       </tr> 
 
      </table> 
 
      </div> 
 
     </div> 
 
     <div class="clear"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div align="right"> 
 
    <font size="2">text</font> 
 
    </div> 
 
</div>

Answer 4

你想在後臺添加到#about:after然後透明度應用到這一點。據我所知，無法將透明度直接添加到背景中。

here是一個很好的文章鏈接。