Die Herstellung einer transparenten box mit CSS

Ich versuche, eine durchsichtige box, die auf dem hintergrund der container, aber ich bin nicht in der Lage, um es in der Mitte des Hintergrundes, statt, wenn ich versuche, mit den top-Marge zu erreichen, mein design, es bewegt sich das Hintergrundbild nach unten auch, also würde ich gerne Fragen, warum ich es nicht schaffen, wie das Beispiel von W3C in http://www.w3schools.com/Css/tryit.asp?filename=trycss_transparency

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01   Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <META http-equiv="Content-Type" Content="text/html; Charset=UTF-8">
    <title>
        Portal
    </title>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <script type="text/javascript" src="ajax.js"></script>
</head>
<body onload="load()">
    <div id="header">
        <img src="images/logo.gif" id="logo" alt="Logo"/>
        <a href="http://www.google.com">
            <img src="images/a.png" id="logo2" align="right" alt="logo"/>
        </a>
    </div> 
    <div id="container">
        <div id="function"></div>
        <div id="Display"></div>
        <div id="View"></div>
    </div>
    <div id="footer">
    </div>
</body>
</html>

Hier ist die CSS Datei:

body{
font-size:100%;
margin: 0em 9em 0em 9em;
}

#header{
width:55em;
height:2.375em;
background:black;
border: 0em 0em 0em 0em;
}

#logo{
padding: 0em 0em 0em 2em;
}

#logo2{
width:3.618em;
height:2.3em;
margin: 0.1em 0.25em 0.1em 0em;
}

#container{
width:55em;
height: 36.25em;
background-image:url("images/background1.jpg");
margin: 0.25em 0em 0em 0em;
}

#function{
width:35em;
height:32.625em;
margin: 2em 10em;
background-color: #ffffff;
opacity:0.6;
filter:alpha(opacity=60);
}

#footer{
font-family:"Times New Roman";
width:62em;
font-size:0.75em;
color:grey;
border-top-style:solid;
border-color:grey;
border-width:0.25em;
margin: 0.25em 0em 0em 5em;
}

InformationsquelleAutor Conrad | 2012-07-12

css opacity

8

Gibt es ein paar Möglichkeiten, dies zu tun. Sie verwenden können:

Deckkraft:
```
style {
    opacity: 0.5;
    filter: alpha(opacity=50); //For IE
    -moz-opacity:0.5; //For Firefox < 5.0
}
```
RGBA-Farben:
```
style {
    background: rgba(0, 0, 0, 0.5); //The last item is the opacity
}
```
Ein Bild:
```
style {
    background: url('image/transparent_img.png') repeat top left;
}
```
RGBA ist die schönste Methode, aber nicht unterstützte, die in älteren IE-Versionen.Die Deckkraft ist nicht so gut unterstützt (ALSO wieder). Können Sie eine rga() als fallback aber persönlich für jetzt denke ich, dass ein transparentes Bild ist die beste x-browser-Einsatz.

EDIT: Sehen, wie ich es falsch verstanden, die Frage ist, wollen Sie gerade hinzufügen Polsterung an den #container.

Ich verstehe alle diese Wege können erreichen, um eine transparente box, tatsächlich, ich kann die box, aber mein problem ist statt der Standort-problem, derzeit ist meine box transparent werden, bleiben Sie in Kontakt mit dem Hintergrundbild des Containers, der nicht ganz gut aus, ich habe versucht, fügen Sie eine dummy-division, bevor die Funktion div, und legen Sie die buttom-Marge auf einen Wert, aber immer noch nicht funktioniert, also ich würde gerne Fragen, was ist der Grund, warum ich es nicht schaffen, wie das Beispiel von W3C, die die transparente box ist die Ortung in der Mitte.
Ok, du willst also die # - Funktion, div, um nicht zu berühren die Spitze der #container? Ist das richtig? jsfiddle.net/spacebeers/jNATf
ya, das ist genau, was ich tun möchte, diese Website scheint sehr bequem, so dass sogar ich kann nicht laden Sie die screen-capture, indem Sie einfach die Buchung der code, ich kann es lassen Sie andere verstehen das problem
Ok ich habe bearbeitet die Antwort. Sie möchte nur hinzufügen Polsterung an der Spitze von #container
oh, Super, es funktioniert endlich, darf ich Fragen, warum es nicht funktioniert, wenn mit margin funktioniert aber wenn mit Polsterung da möchte ich klar mein Konzept, so dass ich nicht wieder den gleichen Fehler machen.

InformationsquelleAutor SpaceBeers
3

Es richtig funktioniert, aber Ihre Positionierung ist falsch.

div mit background: black enthält nicht Ihre div mit transparent hintergrund. Dann sollten Sie ihn in den html-Code. Auch Sie können es sehen, beim hinzufügen von background: black; zu Ihrem body im css.

Sprechen Sie über die im header-div? Tatsächlich, in meinem design, ich würde gerne meine Seite gliedert sich in drei Teile: header, container und footer, jeweils spearated durch einen 5px Rand. Und in der div-container, würde ich mag es haben, eine durchsichtige box in der Mitte den Inhalt, wie zum Beispiel einige Tabellen, ein Absatz. Aber das problem, die ich treffe, ist, wenn ich versuche, suchen Sie es in der Mitte durch die Einstellung der margin-Wert der Funktion div, drücken Sie den hintergrund nach unten auch, aber wenn ich nicht hinzufügen der Rand oben und unten, es wird Sie berühren die Spitze des hintergrund-Bild, die nicht ganz gut im Blick.
Wenn Sie hinzufügen margin element es nicht angezeigt, im hintergrund auf. Wenn Sie Polsterung gibt es nicht. Also, wenn Sie problem haben mit der normalen Positionierung können Sie auch versuchen, die absolute Positionierung. Aber ich es nicht empfehlen. Für normale Positionierung, die Sie verwenden können margin: 5px auto in Ihrem css zu haben, 5px Raum von oben und unten und in der Mitte von rechts und Links.
ok,danke, lassen Sie mich versuchen, es zuerst machen
Markieren Sie die Antwort als akzeptiert oder upvote, wenn es hilfreich war 🙂

InformationsquelleAutor Mateusz Rogulski

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.