Ostatnio edytowany:

isolation

Autor: Virtual Patriot

Opis 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.

Dodatkowe techniczne informacje o właściwości isolation

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

nie

wartość initial

auto

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości isolation

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

nie

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

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

auto

Opis

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:#CBFFFF;
      }

      div > p {
        margin:0;
        padding:1em;
        background-image:url(http://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="http://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
      </p>
    </div>

  </body>
</html>

isolate

Opis

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:#CBFFFF;
      }

      div > p {
        isolation:isolate;
        margin:0;
        padding:1em;
        background-image:url(http://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="http://webkod.pl/files/css/zwierze-02.png" alt="zdjęcie lwa">
      </p>
    </div>

  </body>
</html>