CSS การปิดบน

ด้วยการใช้ mask ของ CSS คุณสามารถสร้างหลักฐานที่ทับทับและจัดทำให้มันตั้งอยู่บนองค์ประกอบเพื่อปิดบางส่วนขององค์ประกอบบางส่วนหรือทั้งหมด.

คุณสมบัติ mask-image

CSS mask-image คุณสมบัตินี้กำหนดรูปที่ทับทับ.

รูปที่ทับทับสามารถเป็นรูป PNG หรือ SVG หรือกราดฉาก CSS หรือ ตัวแทน SVG <mask> สำหรับ CSS.

การสนับสนุนโปรแกรมนี้

ตัวเลขในตารางด้านล่างแสดงว่าเวอร์ชันแรกที่สนับสนุนคุณสมบัตินี้ทั้งหมด.

ที่มี -webkit- ตัวเลขที่มีหน้าตัดของพรรคแสดงว่าเวอร์ชันแรกที่สนับสนุนหน้าตัดนี้.

Chrome Edge Firefox Safari Opera
120 120 53 15.4 15 -webkit-

ใช้รูปภาพเป็นรูปที่ทับทับ

เพื่อใช้รูป PNG หรือ SVG ในฐานะรูปที่ทับทับ ใช้ url() ส่งค่าให้กับรูปที่ทับทับเส้นทาง.

รูปที่ทับทับต้องมีพื้นที่ที่โปร่งใสหรือครึ่งโปร่งใส. สีดำหมายถึงโปร่งใสทั้งหมด.

นี่คือรูปที่เราจะใช้เป็นรูปที่ทับทับ (รูป PNG):

W3

นี่คือรูปภาพจากอิตาลีห้าเมืองประมง:

Wuhan

ขณะนี้ เราจะนำรูปที่ทำความเข้าใจเป็นหลักฐาน (รูป PNG ด้านบน) มาใช้เป็นหลักฐานที่ทับทับสำหรับรูปภาพอิตาลีห้าเมืองประมง:

Wuhan

ตัวอย่าง

ด้านล่างนี้คือตัวอย่างรหัสต้นตอน:

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

ทดลองด้วยตัวเอง

ตัวอย่างที่ชี้แจง

mask-image คุณสมบัตินี้ระบุว่าภาพที่ใช้เป็นภาพที่ปิดกันขององค์ประกอบ.

mask-repeat คุณสมบัตินี้ระบุว่าภาพที่ปิดกันจะถูกซ้ำแสดงหรือไม่ หรือแบบซ้ำแสดง: ค่า no-repeat หมายความว่าภาพที่ปิดกันจะไม่ถูกซ้ำแสดง (ภาพที่ปิดกันจะถูกแสดงเพียงครั้งเดียว).

ตัวอย่างอื่น

ถ้าเราละครับ mask-repeat คุณสมบัติ ภาพที่ปิดกันจะถูกแสดงอยู่บนภาพ wuyu cun ทั้งหมด:

Wuhan

ตัวอย่าง

ด้านล่างนี้คือตัวอย่างรหัสต้นตอน:

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

ทดลองด้วยตัวเอง

ใช้กราดทวนเป็นหลังภาพที่ปิดกัน

CSS กราดทวนแบบตรงและทวนทรงวงกลม ก็สามารถใช้เป็นภาพที่ปิดกันของหลังภาพได้.

ตัวอย่างกราดทวนแบบตรง

ที่นี่ เราใช้กราดทวนทรงวงกลม ในฐานะหลังภาพที่ปิดกันของภาพ. กราดทวนทรงวงกลมนี้จากด้านบน (ดำ) ถึงด้านล่าง (โปร่ง):

Wuhan

ตัวอย่าง

ใช้กราดทวนทรงวงกลมเป็นหลังภาพที่ปิดกัน:

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

ทดลองด้วยตัวเอง

ที่นี่ เราใช้กราดทวนแบบตรงและหลังภาพข้อความเป็นหลังภาพที่ปิดกันของภาพ:

วuhan shi shi chuwen de zhongyao fazhanyi di, chunqiu zhan guo yilai yizhi shi zhongguo nanfang de junshi he shangye zhongzhen, yuan dai chengwei huguang xing sheng sheng zhi, ming qing shiqi yu bei wei 'chuzhong di yi fan sheng chu' he 'tianxia si ju' zhi yi. Qing mian han kou kai bu he yang wu yundong kaiqi wuhan xian dai hua jingcheng, shi rihai chengwei jin dai zhongguo zhongyao de jingji zhongxin. Wuhan shi xinhai geming shouyi zhi di, jin dai shi shang shu du ci chengwei quan guo zhengji, junshi, wenhua zhongxin.

วuhan shi shi chuwen de zhongyao fazhanyi di, chunqiu zhan guo yilai yizhi shi zhongguo nanfang de junshi he shangye zhongzhen, yuan dai chengwei huguang xing sheng sheng zhi, ming qing shiqi yu bei wei 'chuzhong di yi fan sheng chu' he 'tianxia si ju' zhi yi. Qing mian han kou kai bu he yang wu yundong kaiqi wuhan xian dai hua jingcheng, shi rihai chengwei jin dai zhongguo zhongyao de jingji zhongxin. Wuhan shi xinhai geming shouyi zhi di, jin dai shi shang shu du ci chengwei quan guo zhengji, junshi, wenhua zhongxin.

วuhan shi shi chuwen de zhongyao fazhanyi di, chunqiu zhan guo yilai yizhi shi zhongguo nanfang de junshi he shangye zhongzhen, yuan dai chengwei huguang xing sheng sheng zhi, ming qing shiqi yu bei wei 'chuzhong di yi fan sheng chu' he 'tianxia si ju' zhi yi. Qing mian han kou kai bu he yang wu yundong kaiqi wuhan xian dai hua jingcheng, shi rihai chengwei jin dai zhongguo zhongyao de jingji zhongxin. Wuhan shi xinhai geming shouyi zhi di, jin dai shi shang shu du ci chengwei quan guo zhengji, junshi, wenhua zhongxin.

ตัวอย่าง

ใช้กราดทวนแบบตรงและหลังภาพข้อความเป็นหลังภาพที่ปิดกัน:

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

ทดลองด้วยตัวเอง

ตัวอย่างกราดทวนทรงวงกลม

ที่นี่ เราใช้กราดทวนทรงวงกลม (ทรงที่เป็นวงกลม) ในฐานะหลังภาพที่ปิดกันของภาพ:

Wuhan

ตัวอย่าง

ใช้กราดทวนทรงวงกลมเป็นหลังภาพที่ปิดกัน (วงกลม):

.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%);
}

ทดลองด้วยตัวเอง

ในนี่ เราใช้ทับเงาทรงรัศมี (รูปวงกลม) ในการทับเงาภาพ:

Wuhan

ตัวอย่าง

ใช้ทับเงาทรงรัศมีเพื่อทับเงา (รูปวงกลม):

.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 ในการสร้างทับเงา

ประกาย 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 ทับเงาเงาทรงดาบ:

<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 ทับเงาเงาทรงวงกลม:

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

ทดลองด้วยตัวเอง