web-dev-qa-db-de.com

Wie kann ich den Hintergrund meiner Website transparent machen, ohne auch den Inhalt (Bilder & Text) transparent zu machen?

Ich mache eine Website für ein Schulprojekt und habe derzeit ein kleines Problem ... Ich kann den Hintergrund des Körpers nicht transparent machen, ohne dass dies auch den Inhalt beeinflusst.

Hier ist mein HTML-Code:

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

Und hier ist der CSS-Code:

.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;}

Jede Hilfe ist dankbar ... Vielen Dank im Voraus.

19
KaiZ

Ich denke, die einfachste Lösung besteht darin, das body-Element nicht teilweise transparent zu machen, sondern eine zusätzliche div für den Hintergrund hinzuzufügen und stattdessen die Deckkraft zu ändern.

Sie würden also eine div hinzufügen:

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

Verschieben Sie das Hintergrund-CSS Ihres body-Elements sowie einige zusätzliche Positionierungseigenschaften wie diese:

#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);
}

Hier ist ein Beispiel: http://jsfiddle.net/nbVg4/4/

22
justisb

Ich denke, was passiert, ist, da die Wrapper-ID relativ positioniert ist, erscheint sie an der gleichen Stelle wie der Body-Tag. Was Sie tun sollten, ist, dass Sie der Wrapper-ID einen Z-Index hinzufügen können.

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

Dies sollte Ebenen über dem Tag des transparenten Körpers bilden.

2
Charming Prince

Ich wäre mit @evillinux einverstanden, Am besten ist es, wenn Sie Ihr Hintergrundbild halbtransparent machen, damit es <ie8 unterstützt

Die anderen Vorschläge, ein anderes div zu verwenden, sind ebenfalls eine großartige Option. Wenn Sie dies in css machen möchten, sollten Sie dies tun. Zum Beispiel, wenn die Site über solche Funktionen verfügt, wie die Auswahl der eigenen Hintergrundfarbe. Ich würde vorschlagen, einen Filter für ältere IE zu verwenden. z.B:

filter:Alpha(opacity=50)
2
user2132041

Machen Sie das Hintergrundbild transparent/halbtransparent. Wenn es sich um einen einfarbigen Hintergrund handelt, erstellen Sie einfach ein 1 x 1 x großes Bild in einem Feuerwerk oder was auch immer und passen Sie die Deckkraft an.

1
evilunix

Fügen Sie einfach folgendes in Ihren Code ein 

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

wenn Sie die Größe und Deckkraft angeben möchten, können Sie Folgendes verwenden 

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

Wahrscheinlich möchten Sie einen zusätzlichen Wrapper. Verwenden Sie ein div für den Hintergrund und positionieren Sie es unter Ihrem Inhalt.

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

Es gibt hier eine css3-Lösung , falls dies akzeptabel ist. Es unterstützt den Ansatz von graceful degradation , bei dem css3 nicht unterstützt wird. Sie haben einfach keine Transparenz.

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 */

}

um das Hex-Äquivalent von 80% (CC) zu erhalten, nehmen Sie (pct/100) * 255 und konvertieren Sie es in Hex.

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