shape-image-threshold
- Data publikacji
- Ostatnio edytowano
Zobacz również: w3.org - shape-image-threshold property (LV1)
Przeznaczenie właściwości shape-image-threshold
Za pomocą właściwości shape-image-threshold możemy określić procent przezroczystości, na podstawie którego ze wskazanego przez nas obrazka może zostać utworzony kształt obszaru interesującego nas elementu HTML.
- Informacje dodatkowe
-
brak
Informacje techniczne o właściwości shape-image-threshold
Interpretacja właściwości shape-image-threshold
-
tak
-
tak
-
tak
-
tak
-
nie
-
tak
Zobacz więcej informacji o interpretacji właściwości shape-image-threshold.
Opis wartości właściwości shape-image-threshold
liczba
Wyjaśnienie
Za pomocą właściwości shape-image-threshold oraz dowolnej nieujemnej liczby (z zakresu od 0.0 do 1.0) możemy określić procent przezroczystości, na podstawie którego ze wskazanego przez nas obrazka może zostać utworzony kształt obszaru interesującego nas elementu HTML.
Przykład
shape-image-threshold:0.5;
Kształt obszaru przykładowego elementu "div#float" został ograniczony do kształtu obszaru nieprzekraczającego 50 procent przezroczystości posiadanego przez obrazek znajdujący się pod adresem "https://webkod.pl/files/css/obrazek-07.png", ponieważ do wspomnianego elementu "div#float" została dodana właściwość "shape-image-threshold" wraz z wartością "0.5" oraz właściwość "shape-outside" wraz z wartością w postaci funkcji "url()", w której to funkcji została użyta wartość "https://webkod.pl/files/css/obrazek-07.png".
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#blok {
font-size:0.8em;
background-color:#7DCDE8;
}
#float {
shape-outside:url(https://webkod.pl/files/css/obrazek-07.png);
shape-image-threshold:0.5;
float:left;
width:200px;
line-height:200px;
text-align:center;
font-size:1.8em;
background-color:red;
}
</style>
</head>
<body>
<div id="blok">
<div id="float">float</div>
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
</div>
</body>
</html>