پوشش CSS

با استفاده از پوشش CSS، می‌توانید یک لایه پوشش ایجاد کرده و آن را روی عنصر قرار دهید تا بخشی یا تمامی بخش‌های برخی از بخش‌های عنصر را پنهان کنید.

ویژگی mask-image

CSS mask-image این ویژگی تصویر لایه پوشش را مشخص می‌کند.

تصویر لایه پوشش می‌تواند تصویر PNG، تصویر SVG،تغییرات رنگ CSS یا عنصر <mask> SVG.

پشتیبانی مرورگر

اعداد در جدول زیر نشان‌دهنده نسخه اولیه‌ای هستند که این ویژگی را کامل پشتیبانی می‌کنند.

با -webkit- عدد پیشوند نشان‌دهنده نسخه اولیه‌ای است که پشتیبانی از این پیشوند را دارد.

استفاده از تصویر به عنوان لایه پوشش

برای استفاده از تصویر PNG یا SVG به عنوان لایه پوشش، از url() ارائه تصویر لایه پوشش.

تصویر پوشش باید دارای منطقه شفاف یا نیمه شفاف داشته باشد. سیاه کامل شفاف است.

این تصویر پوشش که از آن استفاده خواهیم کرد (تصویر PNG) است:

این تصویر از دهکده‌های پنجگانه ایتالیا است:

امروز، ما تصویر پوشش (تصویر PNG بالای) را به عنوان لایه پوشش تصویر از دهکده‌های پنجگانه ایتالیا اعمال می‌کنیم:

مثال

در زیر کد منبع آمده است:

.mask1 {
  -webkit-mask-image: url(w3.png);
  mask-image: url(w3logo.png);
  mask-repeat: no-repeat;
}

آزمایش کنید

توضیحات مثال

mask-image ویژگی مشخص می‌کند که تصویر لایه پوشاننده برای عنصر استفاده می‌شود.

mask-repeat ویژگی مشخص می‌کند که آیا تصویر لایه پوشاننده تکرار می‌شود یا چگونه تکرار می‌شود. مقدار no-repeat نشان‌دهنده این است که تصویر لایه پوشاننده تکرار نمی‌شود (تصویر لایه پوشاننده فقط یک بار نمایش داده می‌شود).

یک مثال دیگر

اگر ما mask-repeat اگر این ویژگی‌ها را حذف کنیم، لایه پوشاننده در کل تصویر وایفای به نمایش درآمده و تکرار می‌شود:

مثال

در زیر کد منبع آمده است:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}

آزمایش کنید

استفاده از میدان به عنوان لایه پوشاننده

CSS میدان‌های خطی و رادیال می‌توانند به عنوان تصویر لایه پوشاننده استفاده شوند.

مثال میدان خطی

در اینجا، ما از میدان خطی به عنوان لایه پوشاننده تصویر استفاده می‌کنیم. این میدان خطی از بالا (سیاه) به پایین (شفاف) می‌رود:

مثال

استفاده از میدان خطی به عنوان لایه پوشاننده:

.mask1 {
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient(black, transparent);
}

آزمایش کنید

در اینجا، ما از میدان خطی و لایه پوشاننده متن به عنوان لایه پوشاننده تصویر استفاده می‌کنیم:

مثال

استفاده از میدان خطی و لایه پوشاننده متن به عنوان لایه پوشاننده:

.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(wuhan.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(black, transparent);
  mask-image: linear-gradient (black, transparent);
}

آزمایش کنید

مثال میدان رادیال

در اینجا، ما از میدان رادیال (شکل دایره‌ای) به عنوان لایه پوشاننده تصویر استفاده می‌کنیم:

مثال

استفاده از میدان رادیال به عنوان لایه پوشاننده (دایره‌ای):

.mask2 {
  -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

آزمایش کنید

در اینجا، ما از محدوده رادیال (شکل مثلث) به عنوان لایه پوشاننده تصویر استفاده می‌کنیم:

مثال

از یک محدوده رادیال دیگر به عنوان لایه پوشاننده (مثلث) استفاده کنید:

.mask3 {
  -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

آزمایش کنید

استفاده از SVG به عنوان لایه پوشاننده

عناصر <mask> SVG می‌توانند در داخل تصاویر SVG استفاده شوند تا اثرات پوشاننده ایجاد کنند.

در اینجا، ما از عناصر <mask> SVG برای ایجاد لایه‌های پوشاننده مختلف برای تصاویر استفاده می‌کنیم:

مثال

یک لایه پوشاننده SVG (شکل مثلث):

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask1)"></image>
</svg>

آزمایش کنید

مثال

یک لایه پوشاننده SVG (شکل ستاره):

<svg width="600" height="400">
  <mask id="svgmask2">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask2)"></image>
</svg>

آزمایش کنید

مثال

یک لایه پوشاننده SVG (شکل دایره‌ای):

<svg width="600" height="400">
  <mask id="svgmask3">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>

آزمایش کنید