Bagaimana untuk Mencipta Kesan Kecerunan Opacity CSS untuk Laman Web Moden?

Mencapai Kesan Kecerunan Kelegapan CSS

Untuk tapak web moden dengan warna latar belakang dinamik, mencipta kesan kecerunan kelegapan serupa dengan contoh yang disediakan boleh dicapai dengan CSS, tetapi memerlukan pendekatan alternatif.

Berbanding menggunakan tindanan putih, sifat topeng CSS menawarkan penyelesaian yang lebih serba boleh. Silap mata adalah untuk menentukan topeng yang merupakan kecerunan itu sendiri, dengan titik akhir ditetapkan kepada lutsinar (melalui nilai alfa).

<code class="css">p {
    color: red;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
    from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}</code>

Sokongan untuk sifat topeng pada masa ini terhad kepada versi moden Chrome, Safari, dan Opera. Firefox hanya menyokong topeng SVG pada masa ini.

Walau bagaimanapun, dalam perkembangan yang menarik, semua penyemak imbas utama kini menyokong semua sifat topeng yang disebutkan, kecuali Internet Explorer. Ini membolehkan pelaksanaan lancar kecerunan kelegapan CSS di seluruh web.

Untuk demonstrasi penuh dengan latar belakang yang kukuh, lihat kod berikut:

<code class="css">p  {
  color: red;
  font-size: 30px;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)), linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-size: 100% 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left top, left bottom;
  }

div {
    background-color: lightblue;
}</code>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Kesan Kecerunan Opacity CSS untuk Laman Web Moden?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!