Autor publikacji
Virtual Patriot - Administrator

isolation

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości isolation

Za pomocą właściwości isolation możemy określić czy interesujący nas element HTML podczas procesu mieszania się kolorów powinien zapobiegać możliwości mieszania się kolorów swoich elementów potomków z kolorami swoich elementów przodków.

Informacje dodatkowe

brak

Informacje techniczne o właściwości isolation

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

auto

wyjątki initial

brak

animowanie

tak (animacja schodkowa)

Interpretacja właściwości isolation

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości isolation

auto

Wyjaśnienie

Wartość auto jest domyślną wartością właściwości isolation.

Domyślnie element HTML podczas procesu mieszania się kolorów nie zapobiega możliwości mieszania się kolorów swoich elementów potomków z kolorami swoich elementów przodków.

Przykład

  isolation:auto;

obrazek po zmianie kolorystyki za pomocą wartości luminosity właściwości mix-blend-mode

Przykładowy element "p" nie zapobiega możliwości mieszania się kolorów przykładowego elementu "img" z kolorami przykładowego elementu "div".

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;
      }

      div {
        padding:1em;
        background-color:#7DCDE8;
      }

      div > p {
        margin:0;
        padding:1em;
        background-image:url(https://webkod.pl/files/css/obrazek-05.png);
      }

      div > p > img {
        mix-blend-mode:luminosity;
        display:block;
        width:100%;
      }
    </style>
  </head>

  <body>

    <div>
      <p>
        <img src="https://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
      </p>
    </div>

  </body>
</html>

isolate

Wyjaśnienie

Za pomocą wartości isolate właściwości isolation możemy sprawić, że interesujący nas element HTML podczas procesu mieszania się kolorów będzie zapobiegał możliwości mieszania się kolorów swoich elementów potomków z kolorami swoich elementów przodków.

Przykład

  isolation:isolate;

obrazek po zmianie kolorystyki za pomocą wartości luminosity właściwości mix-blend-mode

Przykładowy element "p" zapobiega możliwości mieszania się kolorów przykładowego elementu "img" z kolorami przykładowego elementu "div", ponieważ do wspomnianego elementu "p" została dodana właściwość "isolation" wraz z wartością "isolate".

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;
      }

      div {
        padding:1em;
        background-color:#7DCDE8;
      }

      div > p {
        isolation:isolate;
        margin:0;
        padding:1em;
        background-image:url(https://webkod.pl/files/css/obrazek-05.png);
      }

      div > p > img {
        mix-blend-mode:luminosity;
        display:block;
        width:100%;
      }
    </style>
  </head>

  <body>

    <div>
      <p>
        <img src="https://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
      </p>
    </div>

  </body>
</html>