Faire une boîte transparente avec les CSS

Je suis en train de faire une boîte transparente sur l'arrière-plan du conteneur, cependant, je ne suis pas en mesure de le faire dans le milieu de l'arrière-plan, au lieu de cela, lorsque j'essaie d'utiliser le haut de la marge pour atteindre mon design, il va déplacer l'image de fond vers le bas aussi, donc je voudrais vous demander pourquoi je ne peut pas faire comme l'exemple donné par le W3C dans 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>

Voici le fichier CSS:

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

connexes stackoverflow.com/questions/806000/...

InformationsquelleAutor Conrad | 2012-07-12

css opacity

8

Il ya un couple de façons de le faire. Vous pouvez utiliser:

opacité:
```
style {
    opacity: 0.5;
    filter: alpha(opacity=50); //For IE
    -moz-opacity:0.5; //For Firefox < 5.0
}
```
RGBA couleurs:
```
style {
    background: rgba(0, 0, 0, 0.5); //The last item is the opacity
}
```
Une image:
```
style {
    background: url('image/transparent_img.png') repeat top left;
}
```
RGBA est la plus belle méthode, mais non pris en charge dans les anciennes versions IE.L'opacité n'est pas bien pris en charge (c'est à dire à nouveau). Vous pouvez utiliser un arm() à titre de secours, mais personnellement, pour l'instant, je pense qu'une image transparente est votre meilleur x-navigateur pari.

EDIT: de Voir que j'ai mal compris la question, vous voulez juste ajouter un rembourrage pour le #container.
- Je comprends toutes ces façons de parvenir à effectuer une boîte transparente, en fait, je peux faire la boîte, mais mon problème est plutôt le problème de localisation, actuellement, ma boîte transparente permettra de rester en contact avec l'image de fond du conteneur, ce qui n'est pas très bon à la recherche, j'ai essayé d'ajouter un mannequin de la division d'avant la fonction div et régler le fond de la marge à une certaine valeur, mais ne fonctionne toujours pas, je voudrais donc vous demander ce qui est la raison pour laquelle je ne peut pas faire comme l'exemple de la W3C, qui la zone transparente est la localisation au centre.
- Ok, donc vous voulez la #fonction div pour ne pas être toucher le haut de la #container? Est ce que le droit? jsfiddle.net/spacebeers/jNATf
- ouais, c'est exactement ce que je veux faire, ce site semble très pratique, même si je ne peux pas télécharger la capture d'écran, il suffit de poster le code, je ne peux laisser les autres à comprendre le problème
- Ok j'ai édité la réponse. Vous voulez juste ajouter une marge intérieure en haut de #container
- oh, super, cela fonctionne enfin, puis-je vous demander pourquoi il ne fonctionne pas si l'utilisation de la marge, mais fonctionne lors de l'utilisation de rembourrage puisque je veux effacer mon concept, de sorte que je ne ferai pas la même erreur.
- Cool. À lire sur le modèle de boîte. Qui devrait clarifier les choses - w3.org/TR/CSS2/box.html
InformationsquelleAutor SpaceBeers
3

Il fonctionne correctement, mais que votre positionnement est mauvais.

div avec background: black contient pas de votre div avec transparent arrière-plan. Vous devez changer dans votre code html. Également vous pouvez regarder le travail lorsque vous ajoutez background: black; à votre body en css.
- Parlez-vous de l'en-tête div? En fait, dans ma conception, je voudrais avoir ma page divisée en trois parties: la tête, le conteneur et le pied de page, chaque spearated par une marge de 5px. Et dans le div conteneur, j'aimerais qu'elle ait une boîte transparente au moyen d'afficher le contenu, tels que des tables, un paragraphe. Mais le problème que je rencontre, c'est quand j'essaie de les repérer au milieu par le réglage de la valeur de la marge de la fonction div, pousser l'arrière-plan vers le bas aussi, mais si je n'ajoute pas la marge du haut et le fond, elle va toucher le haut de l'image d'arrière-plan, ce qui n'est pas très bon à la recherche.
- Lorsque vous ajoutez margin à l'élément-il pas de fond d'écran sur elle. Si vous utilisez un rembourrage là, il n'. Donc, si vous avez un problème avec la normale de positionnement, vous pouvez également essayer de positionnement absolu. Mais je le recommande pas. Pour la position normale, vous pouvez utiliser margin: 5px auto dans votre css pour avoir 5px espace de bas en haut et au centre, de droite et de gauche.
- ok,merci, je vais essayer de le faire d'abord
- Marque de la réponse acceptée ou upvote si elle a été utile 🙂
InformationsquelleAutor Mateusz Rogulski

Vous devez vous connecter pour publier un commentaire.