Comment créer un effet de dégradé d'opacité CSS pour les sites Web modernes ?

Obtention d'un effet de dégradé d'opacité CSS

Pour les sites Web modernes avec des couleurs d'arrière-plan dynamiques, il est possible de créer un effet de dégradé d'opacité similaire à l'exemple fourni. avec CSS, mais nécessite une approche alternative.

Par opposition à l'utilisation de superpositions blanches, les propriétés de masque CSS offrent une solution plus polyvalente. Une astuce consiste à définir un masque qui est lui-même un dégradé, avec le point final défini sur transparent (via la valeur alpha).

<code class="css">p {
    color: red;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
    from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}</code>

La prise en charge des propriétés du masque est actuellement limitée aux versions modernes de Chrome, Safari, et Opéra. Firefox ne prend actuellement en charge que les masques SVG.

Cependant, dans le cadre d'un développement passionnant, tous les principaux navigateurs prennent désormais en charge toutes les propriétés de masque mentionnées, à l'exception d'Internet Explorer. Cela permet une implémentation transparente des dégradés d'opacité CSS sur le Web.

Pour une démonstration complète avec un arrière-plan uni, consultez le code suivant :

<code class="css">p  {
  color: red;
  font-size: 30px;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)), linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-size: 100% 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left top, left bottom;
  }

div {
    background-color: lightblue;
}</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!