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