web-dev-qa-db-ja.com

コンテンツ（画像とテキスト）も透明にせずにWebサイトの背景を透明にするにはどうすればよいですか？

私は学校プロジェクトのウェブサイトを運営していますが、現在小さな問題があります...体の背景を透明にすることはできません。

これが私のHTMLコードです。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>text</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<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"><img src="images/a7x-avenged-sevenfold-7050435-1024-831.jpg" width="130" height="25" alt="Rock Band" /></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,
                        <img src="images/denmark.jpg" width="91" height="72" alt="" />
                        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.
                        <img src="images/63781127.jpg" width="95" height="73" alt="pic 3" />
                        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>
</body>
</html>

CSSコードは次のとおりです。

.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;
    background-image: url('images/background.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    opacity: 0.8;
    filter:alpha(opacity=80);
}
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;}

どんな助けでも感謝しています...事前に感謝します。

htmlcssbackgroundopacitytransparent
21
KaiZ

body要素を部分的に透明にするのではなく、背景を保持するために余分なdivを追加し、代わりに不透明度を変更するのが最も簡単な解決策だと思います。

したがって、次のようなdivを追加します。

<div id="background"></div>

body要素の背景CSSを移動し、次のように追加の位置決めプロパティを追加します。

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/background.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    opacity: 0.8;
    filter:alpha(opacity=80);
}

以下に例を示します。 http://jsfiddle.net/nbVg4/4/

23
justisb

何が起こっているのかと思いますが、ラッパーIDは比較的位置が決まっているため、bodyタグと同じ位置に表示されるだけです。これは、ラッパーIDにZ-indexを追加できることです。

#wrapper {
margin: auto;
text-align: left;
width: 832px;
position: relative;
padding-top: 27px;
z-index: 99; /* added this line */
 }

これにより、透明なbodyタグの上にレイヤーが作成されます。

2
Charming Prince

@evillinuxに同意します。背景画像を半透明にして、<ie8

別のdivを使用する他の提案も優れたオプションであり、cssでこれを実行する場合の方法です。たとえば、サイトに独自の背景色を選択する機能がある場合。古いIEにはフィルターを使用することをお勧めします。例えば：

filter:Alpha(opacity=50)
2
user2132041

背景画像を透明/半透明にします。単色の背景の場合は、花火などで1x1ピクセルの画像を作成し、不透明度を調整します...

1
evilunix

コードに以下を含めるだけです

<body background="C:\Users\Desktop\images.jpg">

サイズと不透明度を指定する場合は、次を使用できます

<p><img style="opacity:0.9;" src="C:\Users\Desktop\images.jpg" width="300" height="231" alt="Image" /></p>
0
Gautam Siwach

おそらく追加のラッパーが必要です。背景にdivを使用して、コンテンツの下に配置します。

http://jsfiddle.net/pixelass/42F2j/

HTML

<div id="background-image"></div>
<div id="content">
    Here is the content at opacity 1
    <img src="http://lorempixel.com/100/50/fashion/1/">

</div>

CSS

#background-image {
    background-image: url(http://lorempixel.com/400/200/sports/1/);
    opacity:0.4;
    position:absolute;
    top:0;
    left:0;
    height:200px;
    width:400px;
    z-index:0;
}
#content {
    z-index:1;
    position:relative;
}
0
user950658

css3ソリューションはここにあります 受け入れられる場合。 css3がサポートされていない graceful degradation アプローチをサポートします。透明性がなくなるだけです。

body {
    font-family: tahoma, helvetica, arial, sans-serif;
    font-size: 12px;
    text-align: center;
    background: #000;
    color: #ddd4d4;
    padding-top: 12px;
    line-height: 2;
    background-image: url('images/background.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    background: rgb(0, 0, 0); /* for older browsers */
    background: rgba(0, 0, 0, 0.8); /* R, G, B, A */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC0000); /* AA, RR, GG, BB */

}

80％（CC）に相当する16進数を取得するには、（pct/100）* 255を取得し、16進数に変換します。

0
Matthew Vines
background:rgba(0,0,0,0);
opacity:1;
0
Gabe