Estomper un background sans toucher au HTML

Fermé
Templier Nocturne Messages postés 7734 Date d'inscription jeudi 22 janvier 2009 Statut Membre Dernière intervention 21 mai 2016 - 29 oct. 2010 à 03:14
steph32 Messages postés 96 Date d'inscription jeudi 25 novembre 2004 Statut Membre Dernière intervention 1 novembre 2010 - 29 oct. 2010 à 20:38
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 dimanche 24 octobre 2010 Statut Membre Dernière intervention 3 novembre 2010 16
29 oct. 2010 à 07:54
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 jeudi 22 janvier 2009 Statut Membre Dernière intervention 21 mai 2016 1 101
29 oct. 2010 à 13:32
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 dimanche 24 octobre 2010 Statut Membre Dernière intervention 3 novembre 2010 16
29 oct. 2010 à 18:04
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 jeudi 22 janvier 2009 Statut Membre Dernière intervention 21 mai 2016 1 101
29 oct. 2010 à 19:16
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 dimanche 24 octobre 2010 Statut Membre Dernière intervention 3 novembre 2010 16
29 oct. 2010 à 19:49
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 vendredi 16 avril 2010 Statut Membre Dernière intervention 11 octobre 2012
29 oct. 2010 à 12:13
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 jeudi 22 janvier 2009 Statut Membre Dernière intervention 21 mai 2016 1 101
29 oct. 2010 à 13:46
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 jeudi 25 novembre 2004 Statut Membre Dernière intervention 1 novembre 2010 56
29 oct. 2010 à 20:38
Une petite précision, si tu veux que cela fonctionne sous IE

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