Je voudrais un est-ce possible pour y parvenir sans utiliser d'image de fond transparent png? div pour avoir un arrière-plan transparent.
J'ai essayé de faire cela en utilisant couleur-couleur et opacité , mais le problème est que la bordure et le texte à l'intérieur deviennent également transparents. exemple ici.
4 Réponses :
oui.
Ensemble
et n'utilisez pas Mise à jour de votre exemple à http://jsfiddle.net/eu7by/1/
mise à jour après les commentaires
Vous pouvez utiliser RGBA pour la couleur d'arrière-plan comme mention @dhuntrods. C'est-à-dire que vous avez besoin d'un peu de modification .. http: // Seuverou. Moi / 2009/02 / Bulletprow-cross-navigateur-rgba-arrière-plans / Couleur d'arrière-plan: transparent;
opacité , comme c'est ce qui fait semi-transparent de l'ensemble de la div ..
Je voulais dire que la couleur de fond devrait être semi-transparente. Dans mon exemple, le fond noir doit être semi-transparent (selon l'opacité).
Si vous voulez juste que la couleur de l'arrière-plan soit transparente et non la teneur en enfant, utilisez
Voir cette page pour plus de détails - c'est une spécification CSS3 afin de ne pas apparaître dans chaque navigateur:
arrière-plan-couleur: rgba (0,0,0, 0,5); // définit 50% transparent
Notez que RGBA n'est pas compatible avec IE8 mais est compatible avec IE10 + (CE9 peut-être aussi), Firefox 3+, Safari 3+, Chrome. Vous pouvez utiliser la bibliothèque CSS3pie Polyfill (voir Stackoverflow.com/tags/css3pie/hot ) pour faire fonctionner cette fonctionnalité sur IE8 et au dessous de.
Je devais utiliser un gif de 30x30 transparent comme fond.
background:url('absolute path here');
Ensuite, vous pouvez utiliser la propriété Opacité est une propriété IE5 +, il suffit d'utiliser (voir http://css-tricks.com/snippets/css/css-browser-opacity/ ): p> opacité code> pour rendre cet élément transparent. Étant donné que cet élément n'a pas d'enfants, l'opacité n'affectera aucun autre élément. P> .my-cool-wrapper {
position: relative;
}
.my-cool-wrapper .text-and-images-on-top {
padding: 10px 15px 19px 15px;
z-index: 1;
position: relative; /* needed to enable the z-index */
}
.my-cool-wrapper .transparent-background {
position: absolute;
top: 0;
width: 100%;
height: 100%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; /* IE 8 */
filter: alpha(opacity=10); /* IE 5-7 */
-moz-opacity: 0.1; /* Netscape */
-khtml-opacity: 0.1; /* Safari 1.x */
opacity: 0.1; /* Good browsers */
background-color: blue;
}
Je répondrais avec
Couleur de fond: transparent mais je ne pense pas que vous recherchez cela. Qu'est-ce que tu veux dire exactement par un fond transparent? Edit: La réponse de Gaby upvoted au cas où vous étaient à la recherche d'un fond complètement transparent.Cela ne veut pas que je cherche. Voir mon commentaire à la réponse de Gaby ci-dessous.
lié Stackoverflow.com/Questtions/806000/...
associé Stackoverflow.com/q/4997493/759452