Estomper un background sans toucher au HTML

Templier Nocturne Messages postés 7734 Date d'inscription   Statut Membre Dernière intervention   -  
steph32 Messages postés 96 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

je suis en possession d'un CSS, mais pas du HTML (je modifie un site tout fait avec stylish)

je cherche à estomper le background d'une div sans pour autant estomper le texte au dessus.

mon CSS ressemble ça :

.contenu {
background-color: #aaea15;
background-image: url("http://www.site.com/image.jpg");
}

et je voudrais savoir comment mettre l'attribut "opacity: 0".5 pour qu'il ne concerne que le background et pas tout ".contenu"

j'espère être clair :/

merci d'avance :)
A voir également:

3 réponses

stenzo Messages postés 96 Date d'inscription   Statut Membre Dernière intervention   16
 
Bonjour,
En empilant 2 div ?

.background {
background-image : url("http://www.site.com/image.jpg");
opacity : 0.5;
}

.contenu {
background-color : transparent;

}

Et le HTML :

<div class="background">

<div class="contenu">blablabla</div>

</div>

Ou alors plus simplement, diminue l'opacité de ton image sous photoshop et enregistres la en png ;)
0
Templier Nocturne Messages postés 7734 Date d'inscription   Statut Membre Dernière intervention   1 106
 
comme il est dit dans le 1er message, je n'ai malheureusement pas accès au code HTML, il me faut donc absolument passer par le CSS et que celui ci :(
0
stenzo Messages postés 96 Date d'inscription   Statut Membre Dernière intervention   16
 
Alors je ne pense pas que ce soit possible en utilisant la propriété opacity :/
As-tu essayé de rendre directement l'image opaque avec photoshop ?
Si tu n'as pas ce logiciel je veux bien te le faire. Envoies moi l'image avec imageshack stp :

https://imageshack.com/
0
Templier Nocturne Messages postés 7734 Date d'inscription   Statut Membre Dernière intervention   1 106
 
ben je peux le faire, mais c'est pour un script stylish (un module firefox pour modifier les codes CSS d'un site web), ça va donc poser un problème au niveau du stockage et du temps d'accés :/

sinon, peut être avec un autre attribut ? (display...) ou une technique pour ne pas appliquer l'attribut opacity au texte ?
0
stenzo Messages postés 96 Date d'inscription   Statut Membre Dernière intervention   16
 
Pourquoi display ?? Display s'utilise pour modifier l'affichage d'un élément.
Opacity lui s'applique à touts les éléments du Div quoi que tu fasse. Si tu ne peux que travailler sur le fichier CSS, tu va devoir trouver une autre solution.
Le problème c'est que si tu ne peux pas non plus appliquer une transparence directement sur l'image en PNG, je n'en vois pas d'autre.
Je te recontacte si par hasard je trouve autre chose.
Bonne continuation ;)
0
Chibrou Messages postés 51 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour,

J'avais le même probleme et ce site a été ma solution

www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html


Cordialement
0
Templier Nocturne Messages postés 7734 Date d'inscription   Statut Membre Dernière intervention   1 106
 
malheureusement, cela ne m'aide pas, en effet, il propose soit l'attribut "opacity, qui estompe aussi tout le texte qu'il y a dans ".contenu", soit "rgba()" qui n'agit pas sur l'image en elle même :(
0
steph32 Messages postés 96 Date d'inscription   Statut Membre Dernière intervention   56
 
Une petite précision, si tu veux que cela fonctionne sous IE

/* for IE */
filter:alpha(opacity=85);
/* CSS3 standard */
opacity:0.85;
0