试图让我的背景图片透明

时间：2016-04-27 18:32:36

标签： html css css3

这里是CSS代码的一部分，我似乎无法弄明白。

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

我想降低导入的背景图片的不透明度

4 个答案:

答案 0 :(得分：0)

使用css添加不透明度

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

答案 1 :(得分：0)

最好的解决方案是在你的#about div中创建另一个div并定位div绝对值，同时将你的#about div置于相对位置，并将这个新添加的div的背景赋予rgba（0,0,0,0.5）其中0.5代表不透明度

没有css规则为背景图像提供不透明度。 当你把#about div的不透明度设置为0.4时，它的子节点会继承这个属性，而div里面的任何文字都会得到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);
}

答案 2 :(得分：-1)

使用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>

答案 3 :(得分：-1)

您希望将背景添加到#about:after，然后将透明度应用于此。据我所知，没有办法直接将透明度添加到背景中。

here是关于此的好文章的链接。

相关问题
最新问题