oujood.com

La propriété CSS background-blend-mode

La propriété background-blend-mode définit le mode de fusion et le mélange de chaque ...
Avant tout merci photoshop, bien que c’est fini le temps ou certain effets n’était pas possible sans lui.
Aujourd’hui avec CSS 3 voici un effet que nous pouvons réaliser.

chercher |

Définition et utilisation

La propriété background-blend-mode définit le mode de fusion et le mélange de chaque calque d'arrière-plan (couleur ou image).

Valeur par défaut : normal
Héritée : non
Animer :

Lire à propos des propriétés css animables(animatable)

Version: CSS3
Syntaxe JavaScript : object. style.backgroundBlendMode="screen"

Appui des navigateurs de la propriété background-blend-mode

Les nombres dans le tableau spécifient la version à partir du quelle  le navigateur prend totalement en charge la propriété background-blend-mode.

Propriété  | NavigateurGoogle Chrome Internet Explorer Firefox Safari Opera
background-blend-mode 35 79 30 7.1 22

Syntaxe CSS de la propriété background-blend-mode.

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

Valeurs de la propriété background-blend-mode

Valeur

Description

normal C’est  la valeur par défaut. Définit le mode de fusion  normale
multiply Définit le mode de fusion à multiplier
screen Définit le mode de fusion à l'écran
overlay Définit le mode de fusion de superposer
darken Définit le mode de fusion pour assombrir
lighten Définit le mode de fusion à alléger
color-dodge Définit le mode de fusion de couleur Dodge
saturation Définit le mode de fusion de la saturation
color Définit le mode de fusion à la couleur
luminosity Définit le mode de fusion à la luminosité

Exemple

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
<title>Exemple: la propriété background-blend-mode </title>
<style>
div {
  width: 300px;
  height: 300px;
  background-size: 300px 300px;
  background-repeat:no-repeat;
  background-image: linear-gradient(to left, black 0%,white 100%),
url('https://www.oujood.com/images/logo.png');
  background-blend-mode: multiply;
}
p{font-size: 1.5em;  }
</style>
</head>
<body>
<div></div>
<p><b>Note:</b> Internet Explorer ne prend pas en
charge la propriété background-blend-mode.</p>
</body>
</html>

 

Pour voir les différents effets tester l’exemple avec les différentes valeurs  de la propriété background-blend-mode.

Exemple 2 : enchaînement  de plusieurs modes de fusion.

Chaque couche de fond ne peut avoir seulement un mode de mélange unique, cependant, si nous utilisons des dégradés linéaires multiples, par exemple, chacun d'eux peut avoir son propre mode de fusion qui permet un affichage intéressant.

Ce résultat est obtenu en énumérant ces valeurs dans l'ordre de la couche de fond que vous souhaiteriez

En voici un exemple :

Sélectionner le code

	<!DOCTYPE html>
	<html>
	<head>
		<title>Exemple: la propriété background-blend-mode avec plusieurs
		couches</title>
		<style>
		div {
		  width: 300px;
		  height: 300px;
		  background-size: 300px 300px;
		  background: linear-gradient(purple 0%, red 90%), linear-gradient(to
		right, purple 0%, yellow 90%),
		url('https://www.oujood.com/images/logo.png'); background-blend-mode:
		screen, saturation, lighten;
		}
		p{
		   font-size: 1.5em;
		}
		</style>
	</head>
	<body>
		<div></div>
		<p><b>Note:</b> Internet Explorer ne supporte pas la
		propriété background-blend-mode.</p>
	</body>
	</html>

 


Par Gerywa 11 Janvier 2016

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web