คุณสมบัติ CSS ที่เกี่ยวข้องกับความโปร่งใส
บทความนี้อธิบายคุณสมบัติ CSS ที่เกี่ยวข้องกับความโปร่งใส
คุณสามารถเรียนรู้เกี่ยวกับการใช้งานและไวยากรณ์ของคุณสมบัติ opacity, z-index และ clip-path
YouTube Video
HTML สำหรับการแสดงตัวอย่าง
css-opacity.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-opacity.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties Related to Transparency</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>CSS Properties Related to Transparency</h2>
20 </header>
21 <article>
22 <h3>opacity</h3>
23 <section>
24 <header><h4>opacity: 1</h4></header>
25 <section class="sample-view">
26 <div class="opaque-box">Opaque</div>
27 </section>
28 <header><h4>opacity: 0.5</h4></header>
29 <section class="sample-view">
30 <div class="semi-transparent-box">Semi-transparent</div>
31 </section>
32 <header><h4>opacity: 0</h4></header>
33 <section class="sample-view">
34 <div class="transparent-box">Transparent</div>
35 </section>
36 <header><h4>transition: opacity 2s ease-in-out</h4></header>
37 <section class="sample-view">
38 <div class="opacity-transition-box">Opacity with Transition (Fade out on hover)</div>
39 </section>
40 <header><h4>Parent & Child Element</h4></header>
41 <section class="sample-view">
42 <div class="opacity-parent">
43 Parent Element & <span class="opacity-child">Child Element</span>
44 </div>
45 </section>
46 </section>
47 </article>
48 <article>
49 <h3>z-index</h3>
50 <section>
51 <div class="z-index-box1">1</div>
52 <div class="z-index-box2">
53 <div class="z-index-box2-1">2-1</div>
54 2
55 </div>
56 <div class="z-index-box3">3</div>
57 </section>
58 </article>
59 <article>
60 <h3>clip-path</h3>
61 <section>
62 <h4>Clip-path Property Examples</h4>
63 <header><h4>clip-path: circle(50% at 50% 50%)</h4></header>
64 <section class="sample-view">
65 <div class="clip-path-circle">Circle</div>
66 </section>
67 <header><h4>clip-path: ellipse(50% 30% at 50% 50%)</h4></header>
68 <section class="sample-view">
69 <div class="clip-path-ellipse">Ellipse</div>
70 </section>
71 <header><h4>clip-path: polygon(50% 0%, 100% 100%, 0% 100%)</h4></header>
72 <section class="sample-view">
73 <div class="clip-path-polygon">Polygon</div>
74 </section>
75 <header><h4>clip-path: inset(10% 20% 30% 40%)</h4></header>
76 <section class="sample-view">
77 <div class="clip-path-inset">Inset</div>
78 </section>
79 <header><h4>clip-path: url(#myClip)</h4></header>
80 <section class="sample-view">
81 <div class="clip-path-url">Url</div>
82 </section>
83 </section>
84 <svg width="0" height="0">
85 <clipPath id="myClip">
86 <circle cx="50" cy="50" r="40" />
87 </clipPath>
88 </svg>
89 </article>
90 </main>
91</body>
92</html>ผลกระทบของตัวกรอง
คุณสมบัติ opacity
1.opaque-box {
2 background-color: skyblue;
3 opacity: 1; /* completely opaque */
4 border: 1px solid black;
5}
6
7.semi-transparent-box {
8 background-color: skyblue;
9 opacity: 0.5; /* semi-transparent */
10 border: 1px solid black;
11}
12
13.transparent-box {
14 background-color: skyblue;
15 opacity: 0; /* completely transparent */
16 border: 1px solid black;
17}
18
19.opacity-transition-box {
20 background-color: orange;
21 transition: opacity 2s ease-in-out;
22 border: 1px solid black;
23}
24
25.opacity-transition-box:hover {
26 opacity: 0; /* Fade out on hover */
27}
28
29.opacity-parent {
30 background-color: blue;
31 opacity: 0.5;
32}
33
34.opacity-child {
35 background-color: red;
36}คุณสมบัติ opacity ถูกใช้เพื่อกำหนดความโปร่งใสขององค์ประกอบ คุณสมบัตินี้กำหนดความโปร่งใสของทั้งองค์ประกอบ โดยค่าที่ใกล้เคียง 0 จะโปร่งใสกว่าและค่าที่ใกล้เคียง 1 จะทึบแสงกว่า คุณสมบัติ opacity สามารถผสมผสานกับแอนิเมชันเพื่อสร้างเอฟเฟกต์การเปลี่ยนแปลงแบบจางเข้าและจางออก
คุณสมบัติ opacity มีผลกระทบไม่เพียงแต่เฉพาะองค์ประกอบที่ตั้งค่า แต่ยังมีผลต่อองค์ประกอบลูกอีกด้วย ซึ่งหมายความว่าหากองค์ประกอบพาเรนต์ถูกกำหนดให้โปร่งแสง องค์ประกอบลูกก็จะได้รับความโปร่งแสงนั้นด้วย
ในตัวอย่างนี้ การตั้งค่าจะถูกกำหนดไว้ดังนี้
-
เมื่อกำหนดคุณสมบัติ
opacityเป็น1องค์ประกอบจะทึบแสงอย่างสมบูรณ์ เหมือนกับองค์ประกอบปกติ -
เมื่อกำหนดคุณสมบัติ
opacityเป็น0.5องค์ประกอบจะโปร่งแสงบางส่วน -
เมื่อกำหนดคุณสมบัติ
opacityเป็น0องค์ประกอบจะโปร่งใสอย่างสมบูรณ์และมองไม่เห็นเลย -
กำหนดคุณสมบัติ
transitionเป็นopacityดังนั้นเมื่อเลื่อนเมาส์ไปที่องค์ประกอบ องค์ประกอบจะค่อย ๆ หายไปและกลายเป็นโปร่งใสอย่างสมบูรณ์หลังจาก 2 วินาที -
หากองค์ประกอบหลักมีคุณสมบัติ
opacityเท่ากับ0.5องค์ประกอบย่อยก็จะโปร่งแสงบางส่วนเช่นกัน
คุณสมบัติ z-index
1.z-index-box1 {
2 position: relative;
3 width: 100px;
4 height: 100px;
5 background-color: red;
6 top: 10px;
7 left: 10px;
8 z-index: 1; /* Displayed in the foreground */
9}
10
11.z-index-box2 {
12 position: relative;
13 width: 100px;
14 height: 100px;
15 background-color: blue;
16 top: -100px;
17 left: 90px;
18 z-index: 0; /* Displayed in the background */
19}
20
21.z-index-box3 {
22 position: relative;
23 width: 100px;
24 height: 100px;
25 background-color: green;
26 top: -160px;
27 left: 80px;
28 z-index: 2; /* Displayed in the frontmost layer */
29}
30
31.z-index-box2-1 {
32 position: relative;
33 width: 50px;
34 height: 50px;
35 background-color: skyblue;
36 top: 0px;
37 left: 0px;
38 z-index: 4;
39}คุณสมบัติ z-index เป็นคุณสมบัติที่ใช้ใน CSS เพื่อควบคุมลำดับการซ้อนขององค์ประกอบ คุณสมบัตินี้กำหนดว่าองค์ประกอบจะแสดงอยู่ข้างหน้าหรือข้างหลังองค์ประกอบอื่น
- ในกล่องสีแดง มีการกำหนด
z-indexเป็น1ดังนั้นองค์ประกอบนี้จึงแสดงอยู่ด้านหน้าขององค์ประกอบอื่น - ในกล่องสีน้ำเงิน มีการกำหนด
z-indexเป็น0ดังนั้นองค์ประกอบนี้จึงแสดงอยู่ด้านหลังกล่องสีแดง - ในกล่องสีเขียว กำหนด
z-indexเป็น2ซึ่งทำให้องค์ประกอบนี้อยู่ในตำแหน่งหน้าสุด - ในกล่องสีฟ้าอ่อน มีการกำหนด
z-indexสูงสุดที่4แต่เนื่องจากองค์ประกอบหลักมีz-indexเท่ากับ0จึงไม่แสดงอยู่ในตำแหน่งหน้าสุด
กลไกพื้นฐาน
คุณสมบัติ z-index ใช้ค่าตัวเลข โดยที่องค์ประกอบที่มีตัวเลขสูงกว่าจะถูกแสดงไว้ด้านหน้าขององค์ประกอบที่มีตัวเลขน้อยกว่า โดยค่าเริ่มต้น องค์ประกอบที่ไม่ได้ระบุ z-index จะจัดเรียงซ้อนกันตามลำดับที่ปรากฏใน HTML
อย่างไรก็ตาม เพื่อให้ z-index มีผล องค์ประกอบจะต้องตั้งค่าคุณสมบัติ position เป็น relative, absolute, fixed, หรือ sticky หาก position ถูกตั้งเป็น static แล้ว z-index จะไม่มีผล
ค่า
-
หากกำหนด
z-indexเป็นจำนวนเต็มบวก องค์ประกอบจะถูกแสดงไว้ด้านหน้ามากขึ้น ตัวเลขยิ่งใหญ่ องค์ประกอบก็จะถูกแสดงไว้ด้านหน้ากว่าองค์ประกอบอื่น ๆ- หาก
z-indexถูกตั้งเป็น0องค์ประกอบจะยังคงเรียงตามลำดับซ้อนที่เป็นค่าเริ่มต้น - หาก
z-indexถูกตั้งเป็น1องค์ประกอบจะถูกแสดงหนึ่งชั้นข้างหน้าองค์ประกอบอื่น
- หาก
-
หากกำหนด
z-indexเป็นจำนวนเต็มลบ องค์ประกอบจะถูกแสดงไปด้านหลังมากขึ้น ตัวเลขยิ่งเล็ก องค์ประกอบก็จะถูกแสดงไว้ด้านหลังกว่าองค์ประกอบอื่น ๆ- หาก
z-indexถูกตั้งเป็น-1องค์ประกอบจะถูกแสดงหนึ่งชั้นข้างหลังองค์ประกอบอื่น
- หาก
หมายเหตุ
z-indexจะขึ้นอยู่กับz-indexขององค์ประกอบแม่ เมื่อองค์ประกอบแม่มีการระบุz-indexลำดับซ้อนสัมพัทธ์ภายในองค์ประกอบแม่นั้นจะถูกนำไปใช้ นี่เรียกว่า บริบทการซ้อนลำดับ (stacking context) ดังนั้น ถึงแม้องค์ประกอบลูกจะมีz-indexสูง หากz-indexขององค์ประกอบแม่ต่ำ มันก็จะไม่ปรากฏอยู่ด้านหน้าองค์ประกอบอื่น ๆ
คุณสมบัติ clip-path
CSS clip-path เป็นคุณสมบัติที่ใช้ในการตัดองค์ประกอบให้เป็นรูปร่างเฉพาะ ปกติแล้ว องค์ประกอบจะถูกแสดงเป็นกล่องสี่เหลี่ยม แต่ด้วย clip-path องค์ประกอบสามารถแสดงในรูปร่างที่ซับซ้อน เช่น วงกลมหรือรูปหลายเหลี่ยมได้ มันเป็นเครื่องมือที่มีประโยชน์มากสำหรับการสร้างงานออกแบบภาพหรือเอฟเฟกต์แบบโต้ตอบ
คุณสมบัติ clip-path จะจำกัดพื้นที่การแสดงผลขององค์ประกอบ และซ่อนส่วนที่อยู่นอกพื้นที่ของรูปร่างที่ระบุ ต่อไป เราจะแนะนำวิธีการระบุรูปร่างที่ใช้กันทั่วไป
รูปร่างการตัดหลัก
circle()
1.clip-path-circle {
2 width: 100px;
3 height: 100px;
4 background-color: green;
5 clip-path: circle(50% at 50% 50%);
6}circle() ใช้ในการตัดองค์ประกอบให้เป็นรูปร่างวงกลม คุณสามารถควบคุมรูปร่างได้โดยการระบุจุดศูนย์กลางและรัศมีของวงกลม
50%ส่วนแรกคือรัศมีของวงกลม (คิดเป็นเปอร์เซ็นต์ของความกว้างหรือความสูงขององค์ประกอบ)at 50% 50%ที่ตามมาคือตำแหน่งจุดศูนย์กลางของวงกลม (คิดเป็นเปอร์เซ็นต์ของความกว้างและความสูงขององค์ประกอบ)
ในที่นี้ มีการระบุวงกลมที่มีรัศมีครึ่งหนึ่งของขนาดองค์ประกอบ โดยอยู่กึ่งกลางในองค์ประกอบ
ellipse()
1.clip-path-ellipse {
2 width: 100px;
3 height: 100px;
4 background-color: green;
5 clip-path: ellipse(50% 30% at 50% 50%);
6}ellipse() ตัดองค์ประกอบให้เป็นรูปร่างวงรี คุณกำหนดรัศมีของความกว้างและความสูง รวมทั้งตำแหน่งจุดศูนย์กลาง
50% 30%ส่วนแรกคือรัศมีของความกว้างและความสูงat 50% 50%ที่ตามมาคือตำแหน่งจุดศูนย์กลางของวงรี
ในตัวอย่างนี้ มีการระบุวงรีที่อยู่กึ่งกลางในองค์ประกอบ โดยมีความกว้าง 50% และความสูง 30%
polygon()
1.clip-path-polygon {
2 width: 100px;
3 height: 100px;
4 background-color: green;
5 clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
6}polygon() สร้างรูปหลายเหลี่ยมโดยการเชื่อมต่อจุดยอดที่กำหนด แต่ละจุดยอดถูกกำหนดด้วยพิกัดสัมพัทธ์ภายในองค์ประกอบ
- ในตัวอย่างนี้ มีการระบุจุดยอดสามจุด (กลางบน, ล่างขวา, ล่างซ้าย) และตัดเป็นรูปสามเหลี่ยม
polygon()มีความยืดหยุ่นสูงและสามารถสร้างรูปร่างใดก็ได้
inset()
1.clip-path-inset {
2 width: 100px;
3 height: 100px;
4 background-color: green;
5 clip-path: inset(10% 20% 30% 40%);
6}inset() ตัดเข้าด้านในจากขอบด้านนอกขององค์ประกอบ กำหนดสี่เหลี่ยมโดยระบุระยะห่างจากแต่ละด้านทั้งสี่
10%คือระยะห่างจากขอบด้านบน20%คือระยะห่างจากขอบด้านขวา30%คือระยะห่างจากขอบด้านล่าง40%คือระยะห่างจากขอบด้านซ้าย
การกำหนดนี้สร้างสี่เหลี่ยมที่ย่อเข้าด้านในขององค์ประกอบ
clip-path โดยใช้ SVG
1/*
2<svg width="0" height="0">
3 <clipPath id="myClip">
4 <circle cx="50" cy="50" r="40" />
5 </clipPath>
6</svg>
7*/
8.clip-path-url {
9 width: 100px;
10 height: 100px;
11 background-color: green;
12 clip-path: url(#myClip);
13}CSS clip-path สามารถใช้รูปร่างพื้นฐานได้ไม่เพียงเท่านั้น แต่ยังสามารถตัดเป็นรูปร่างซับซ้อนโดยใช้ SVG <clipPath>
- ในตัวอย่างนี้ มีการใช้พาธตัดกลม (clip path) ที่กำหนดไว้ใน SVG ด้วย
idว่าmyClipกับองค์ประกอบ HTML
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย