ให้เรตสมาชิก: 4 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งาน
 

Opacity (โอพาซิตี้)  คืออะไร? 

ค่า Opacity คือค่าความทึบแสง หรือความโปร่งแสงของภาพ 

ยิ่งเราปรับค่า Opacity ให้ต่ำลงเท่าใด ภาพก็จะยิ่งทึบมากขึ้นเท่านั้น 

เช่น เราปรับค่า Opacity ให้เป็น 0.2 ภาพที่แสดงออกมา ก็จะทึบแสงมากกว่าการปรับค่า Opacity ให้เป็น 0.5

ตัวอย่าง 

ภาพการปรับค่า Opacity ให้เป็น 0.5
ภาพการปรับค่า Opacity ให้เป็น 0.2
จะเห็นได้ว่า การที่เราปรับค่า Opacity ให้ต่ำลงมากเท่าใด ภาพก็จะจางลงมากเท่านั้น 
ตัวอย่าง Code (โค้ด) การปรับค่า opacity
<head>
<style>
img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on mouse-over:</p>
<img src="/test/test1.jpg" alt="Forest" width="170" height="100">


<p><b>Note:</b> In IE, a !DOCTYPE must be added for the :hover selector to work on other elements than the a element.</p>

</body>
</html>

 

Reference : W3School. "CSS" [ออนไลน์]. เข้าุถึงได้จาก https://www.w3schools.com/css/ [2 พฤศจิกายน 2560]

อ้างอิงภาพ : www.google.com

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
B - demo Print loading list ภาษาไทยไม่แสดง
โดย mindphp อ 17 มิ.ย. 2018 12:09 am บอร์ด บริษัท เซนิธ เบบี้ แคร์ จำกัด - Tester
1
2
อ 17 มิ.ย. 2018 12:28 am โดย mindphp
B - มีโมดูลเกินใน demo
โดย mindphp ส 16 มิ.ย. 2018 11:53 pm บอร์ด บริษัท เซนิธ เบบี้ แคร์ จำกัด - Tester
0
1
ส 16 มิ.ย. 2018 11:53 pm โดย mindphp
Q - วิธีเรียกตัวแปรมาใช้ในไฟล์ php ที่แสดงในหน้าเว็บใน JoomShopping
โดย Parichat ส 16 มิ.ย. 2018 6:58 pm บอร์ด Joomla Dev
18
44
อ 17 มิ.ย. 2018 10:11 pm โดย Parichat
B - com_mcharts สามารถติดตั้งได้แต่ไม่สามารถเข้าหน้าตั่งค่าได้
โดย Parichat ส 16 มิ.ย. 2018 5:12 pm บอร์ด M061 - ปาริชาติ รัตโณภาส
0
1
ส 16 มิ.ย. 2018 5:12 pm โดย Parichat
B - com_MJUpgrade ไม่สามารถติดตั้งได้
โดย Parichat ส 16 มิ.ย. 2018 4:48 pm บอร์ด M061 - ปาริชาติ รัตโณภาส
0
1
ส 16 มิ.ย. 2018 4:48 pm โดย Parichat
B - com_M2OpenERP Migration สามารถติดตั้งได้แต่ไม่สามารถใช้งานได้
โดย Parichat ส 16 มิ.ย. 2018 4:31 pm บอร์ด M2OpenERP
0
2
ส 16 มิ.ย. 2018 4:31 pm โดย Parichat
controller เรียกใช้ function ใน model ใน JoomShopping
โดย Parichat ส 16 มิ.ย. 2018 3:38 pm บอร์ด Joomla Developing Knowledge
0
21
ส 16 มิ.ย. 2018 3:38 pm โดย Parichat
งานประจำวันที่ 16 มิถุนายน 2561
โดย Rujikon ส 16 มิ.ย. 2018 9:40 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
2
4
ส 16 มิ.ย. 2018 7:06 pm โดย Rujikon
งานประจำวันที่ 16 มิถุนายน 2561
โดย Parichat ส 16 มิ.ย. 2018 9:35 am บอร์ด M061 - ปาริชาติ รัตโณภาส
1
2
ส 16 มิ.ย. 2018 7:09 pm โดย Parichat
งานประจำวันที่ 16 มิถุนายน 2561
โดย wilawan ส 16 มิ.ย. 2018 8:33 am บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
2
10
ส 16 มิ.ย. 2018 7:02 pm โดย thatsawan
upload file ไม่เข้าค่ะผิดตรงไหนค่ะ รบกวนแนะนำหน่อยค่ะ _/|\_
โดย supattra_su ศ 15 มิ.ย. 2018 6:08 pm บอร์ด Programming - PHP
1
40
ส 16 มิ.ย. 2018 1:03 am โดย mindphp
ฺB - In Process ชื่อลูกค้าหาย [2018-01][017]
โดย Rujikon ศ 15 มิ.ย. 2018 5:53 pm บอร์ด Hachanna - Testter
0
4
ศ 15 มิ.ย. 2018 5:53 pm โดย Rujikon
R - อัพเดท state auto หลังจาก state ของ RMA เป็น deliver
โดย nuattawoot ศ 15 มิ.ย. 2018 5:13 pm บอร์ด อาร์ซีพี โกลบอล จำกัด - Tester
2
12
ส 16 มิ.ย. 2018 1:53 pm โดย Rujikon
Q - ทำให้รูปฟีเจอร์ของสินค้าคลิกไปแล้วให้ได้ตรงกับสินค้าที่เปิดเข้าไปดู
โดย Parichat พฤ 14 มิ.ย. 2018 5:24 pm บอร์ด Joomla Dev
36
86
ส 16 มิ.ย. 2018 10:04 am โดย Parichat
บริษัท Hachana แจ้งอัพข้อมูล
โดย Rujikon ศ 15 มิ.ย. 2018 3:48 pm บอร์ด Mindphp Task (ทดลองงาน)
0
7
ศ 15 มิ.ย. 2018 3:48 pm โดย Rujikon
R - ERP ของบริษัท Expenses จะต้องไม่เห็นค่าใช้จ่ายของคนอื่น (M055) เห็นหมดเลย
โดย thatsawan ศ 15 มิ.ย. 2018 2:23 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
1
3
ศ 15 มิ.ย. 2018 2:23 pm โดย thatsawan
วิธีหาวันเเรกเเละวันที่สิ้นสุด ของปีใน python
โดย thatsawan ศ 15 มิ.ย. 2018 1:24 pm บอร์ด Python Knowledge
0
16
ศ 15 มิ.ย. 2018 1:24 pm โดย thatsawan
หลักการเก็บข้อมูลสำหรับการพัฒนาระบบ
โดย wilawan ศ 15 มิ.ย. 2018 1:23 pm บอร์ด M062 - วิลาวัณย์ นักษัตรมณฑล
0
6
ศ 15 มิ.ย. 2018 1:23 pm โดย wilawan
B - หน้ารายการสินค้าต้องมีกรอบสีขาว
โดย tsukasaz ศ 15 มิ.ย. 2018 11:44 am บอร์ด Doy-shop ( 15 พ.ค. - 29 พ.ค. 61)
1
7
ศ 15 มิ.ย. 2018 12:15 pm โดย Parichat
งานประจำวันที่ 15 มิถุนายน 2561
โดย Rujikon ศ 15 มิ.ย. 2018 9:47 am บอร์ด M060 - นายรุจิกร พงษ์พิละ
1
9
ศ 15 มิ.ย. 2018 6:41 pm โดย Rujikon