Je peux voir dans les références CSS comment définir la transparence de l'image et comment définir une image d'arrière-plan . Mais comment puis-je combiner ces deux afin de définir une image d'arrière-plan transparente?
J'ai une image que j'aimerais utiliser comme arrière-plan, mais elle est trop lumineuse - je voudrais réduire l'opacité à environ 0,2. Comment puis-je faire ceci?
#main {
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}
opacity: ...dans tous les navigateurs, c'est bien mieux!la source
:beforeplace de:afteret puis je n'ai pas à trafiquer lez-indexcar:beforese retrouve automatiquement sous le contenu principal. (Actuellement testé dans Chrome et FF.)background-repeat: no-repeat; background-attachment: fixed; background-position: center;dans #main: après {...} .Solution avec 1 div et aucune image transparente:
Vous pouvez utiliser la fonctionnalité CSS3 multibackground et mettre deux arrière-plans: un avec l'image, un autre avec un panneau transparent dessus (car je pense qu'il n'y a aucun moyen de définir directement l'opacité de l'image d'arrière-plan):
Vous ne pouvez pas l'utiliser
rgba(255,255,255,0.5)car seul il n'est accepté qu'à l'arrière, vous avez donc utilisé des dégradés générés pour chaque navigateur pour cet exemple (c'est pourquoi il est si long). Mais le concept est le suivant:http://jsfiddle.net/pBVsD/1/
la source
Solution simple
si vous devez définir le dégradé sur l' image d' arrière-plan uniquement:
la source
J'ai vu cela et dans CSS3, vous pouvez maintenant placer du code comme ceci. Disons que je veux qu'il couvre tout l'arrière-plan, je ferais quelque chose comme ça. Ensuite, avec
hsla(0,0%,100%,0.70)ou rgba, vous utilisez un fond blanc avec n'importe quel pourcentage de saturation ou d'opacité pour obtenir le look que vous désirez.la source
Vous pouvez utiliser CSS psuedo selector :: after pour y parvenir. Voici une démo fonctionnelle.
la source
J'ai eu un problème similaire. J'avais une image et je voulais réduire la transparence et avoir un fond noir derrière l'image. Au lieu de réduire l'opacité ou de créer un fond noir ou tout autre div secondaire, je définis un dégradé linéaire sur l'image sur une seule ligne:
la source
J'ai utilisé la réponse de @Dan Eastwell et cela fonctionne très bien. Le code est similaire à son code mais avec quelques ajouts.
la source
Une excellente façon de le faire pour une image simple est de le faire en utilisant uniquement CSS pour définir l'arrière-plan de l'élément HTML de cette façon.
Si vous voulez obtenir de la fantaisie et définir son opacité, alors, dans IE9 + *, vous pouvez définir une couleur d'arrière-plan transparente du corps. Cela fonctionne en superposant un blanc semi-transparent pour rendre l'image plus blanche et sembler plus lumineuse. Par exemple, un blanc avec une opacité de 75% (
rgba(255,255,255,.75)) produirait l'effet suivant.position: relative, tandis que le corps l'estposition: absolute. Il s'agit d'empêcher la couleur d'arrière-plan du corps de se comporter davantage comme un surligneur du texte dans le corps.Cela pourrait même être étendu à quelque chose de comparable, mais toujours très distinct des filtres CSS en changeant autour de l'arrière-plan de couleur RGBA du corps. Par exemple,
rgba(0,255,0,.75)créerait une teinte très verte comme vous pouvez le voir dans l'extrait de code.rgba(0,255,0,.75)comme quelque chose illustré par{red:0, green:255, blue:0, alpha:'75%'}.* Un tableau complet de compatibilité peut être trouvé sur Can I Use. Cependant, veuillez également noter que vous devez cliquer sur "Afficher tout" pour voir que IE9 le prend en charge.
Addenda
Étant donné que j'ai déjà répondu à la question, mais que j'aimerais en ajouter davantage, je nomme cet addendum à la section et lui ajoute des informations potentiellement utiles. Donc, pour extrapoler encore plus sur le contenu ci-dessus, vous pouvez utiliser un SVG comme image de fond pour faire des choses impressionnantes. Par exemple, vous pouvez créer un fond d'écran de chargement comportant une icône de site Web sympa comme vous pouvez le voir dans l'exemple d'un SVG encodé en base64 ci-dessous.
background-size: coverCSS entraîne le redimensionnement du logo SVG en arrière-plan à la taille de l'élément HTML.la source
Dans votre CSS, ajoutez ...
En JavaScript, utilisez ...
NB: Ajoutez des préfixes de fournisseur au besoin, mais Chromium devrait être bien sans.
la source
Eh bien, la seule façon CSS de ne faire que la transparence d'arrière-plan est via,
RGBamais comme vous voulez utiliser une image, je suggère d'utiliser Photoshop ou Gimp pour rendre l'image transparente, puis l'utiliser comme arrière-plan.la source
opactiy: 1;:, pas seulement RGBa.background-imagestyle sur un conteneur, puis définir unopacitystyle sur le même élément. Cela rendrait également le texte et les autres contenus de cet élément transparents. Essayez ceci si vous ne me croyez pas: w3schools.com/Css/tryit.asp?filename=trycss_transparencyJe viens d'ajouter position = absolu, haut = 0, largeur = 100% dans le #main et définir la valeur d'opacité sur le #background
J'ai appliqué l'arrière-plan à un div avant le principal.
la source
Je suis tombé sur ce post car j'avais le même problème, alors je me suis demandé pourquoi jouer avec CSS, ajuster les valeurs et actualiser lorsque vous pouvez facilement ajuster l'opacité dans Photoshop? Copiez l'image, collez-la comme un nouveau calque puis déplacez le curseur d'opacité.
la source
J'ai eu un problème similaire et j'ai juste pris l'image d'arrière-plan avec photoshop et créé un nouveau .png avec l'opacité dont j'avais besoin. Problème résolu sans se soucier de savoir si mon CSS fonctionnait sur tous les appareils et navigateurs
la source