ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การจัดสินค้าขาย
โดย milk2533 อ 24 พ.ย. 2020 12:49 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
4
อ 24 พ.ย. 2020 12:49 pm โดย milk2533
FIFO สินค้าตามวันหมดอายุ
โดย milk2533 อ 24 พ.ย. 2020 11:17 am บอร์ด Share Knowledge
0
6
อ 24 พ.ย. 2020 11:17 am โดย milk2533
การนับสต๊อคสินค้าเซเว่น
โดย milk2533 อ 24 พ.ย. 2020 11:15 am บอร์ด Share Knowledge
0
3
อ 24 พ.ย. 2020 11:15 am โดย milk2533
FIFO สินค้าตามวันหมดอายุ
โดย milk2533 อ 24 พ.ย. 2020 10:51 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
0
4
อ 24 พ.ย. 2020 10:51 am โดย milk2533
การนับสต๊อคสินค้าเซเว่น
โดย milk2533 อ 24 พ.ย. 2020 10:45 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
0
3
อ 24 พ.ย. 2020 10:45 am โดย milk2533
เทคนิคการใช้งานเว็บไซต์ mindphp Tip&Trick
โดย milk2533 อ 24 พ.ย. 2020 9:50 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
0
5
อ 24 พ.ย. 2020 9:50 am โดย milk2533
แนะนำเว็บไซต์ mindphp.com
โดย milk2533 อ 24 พ.ย. 2020 9:48 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
0
9
อ 24 พ.ย. 2020 9:48 am โดย milk2533
งานประจำวันที่ 24 พฤศจิกายน 2563
โดย milk2533 อ 24 พ.ย. 2020 9:38 am บอร์ด M115 - กฤตวรรณ อาทิตย์ตั้ง
0
40
อ 24 พ.ย. 2020 9:38 am โดย milk2533