CSS | propiedad forma-imagen-umbral

La propiedad shape-image-threshold se usa para establecer el umbral del canal alfa usado para extraer la forma cuando se usa una imagen para la forma exterior.

Sintaxis:

shape-image-threshold: <alpha-value>

Valores de propiedad:

  • valor alfa: se utiliza para establecer el umbral para extraer la forma. Los píxeles que son mayores que el valor de umbral se considerarían para la forma. Se puede utilizar un valor decimal de 0,0 a 1,0 para establecer el umbral de totalmente transparente a totalmente opaco. Si los valores están fuera del rango, se sujetan a este rango.

Los siguientes ejemplos ilustran la propiedad shape-image-threshold :

Ejemplo 1: En este ejemplo, estableceremos el umbral en 0,5

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | shape-image-threshold
    </title>
    <style>
        .outline {
            shape-outside: linear-gradient(
                    to right, green, transparent);
          
            /* shape-image-threshold effect */
            shape-image-threshold: 0.4;
            background-image: linear-gradient(
                    to right, green, transparent);
            width: 300px;
            height: 130px;
            float: left;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>
            CSS | shape-image-threshold: 0.5;
        </b>
          
        <br><br>
    </center>
      
    <div class="outline"></div>
      
    <div class="container">
        GeeksforGeeks is a computer science portal
        with a huge variety of well written and
        explained computer science and programming 
        articles, quizzes and interview questions.
        The portal also has dedicated GATE preparation
        and competitive programming sections.
        <br><br> 
        GeeksforGeeks is a computer science portal
        with a huge variety of well written and 
        explained computer science and programming
        articles, quizzes and interview questions.
        The portal also has dedicated GATE preparation
        and competitive programming sections.
    </div>
</body>
  
</html>

Producción:

Ejemplo 2: En este ejemplo, estableceremos el umbral en 0,2

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS | shape-image-threshold
    </title>
    <style>
        .outline {
            shape-outside: linear-gradient(20deg,
                rgb(77, 26, 103), transparent 80%,
                transparent);         
              
            /* shape-image-threshold effect */
            shape-image-threshold: 0.2;
            background-image: linear-gradient(
                to top, green, transparent);
            width: 300px;
            height: 125px;
            float: left;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
          
        <b>
            CSS | shape-image-threshold: 0.2;
        </b>
          
        <br><br>
    </center>
      
    <div class="outline"></div>
      
    <div class="container">
        GeeksforGeeks is a computer science portal
        with a huge variety of well written and
        explained computer science and programming 
        articles, quizzes and interview questions.
        The portal also has dedicated GATE preparation
        and competitive programming sections.
        <br><br> 
        GeeksforGeeks is a computer science portal
        with a huge variety of well written and 
        explained computer science and programming
        articles, quizzes and interview questions.
        The portal also has dedicated GATE preparation
        and competitive programming sections.
    </div>
</body>
  
</html>

Producción:

Navegadores compatibles: los navegadores compatibles con la propiedad shape-image-threshold se enumeran a continuación:

  • Google Chrome
  • explorador de Internet 9
  • Firefox
  • Safari
  • Ópera

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *