การปรับค่าความโปร่งใสพื้นหลังข้อความใน css

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
md040
PHP Super Member
PHP Super Member
โพสต์: 265
ลงทะเบียนเมื่อ: 07/11/2016 10:37 am

การปรับค่าความโปร่งใสพื้นหลังข้อความใน css

โพสต์โดย md040 » 14/11/2016 11:02 am

Transparency คือ ค่าความโปร่งใส ในที่นี้เป็นการปรับค่าพื้นหลังของข้อความ
ซึ่งมีค่าอยู่ระหว่าง 0 - 1 (เป็นค่าทศนิยม)
การปรับค่าความโปร่งใสพื้นหลังข้อความใน css โดยการกำหนดที่คำสั่ง

โค้ด: เลือกทั้งหมด

 opacity: ค่าตัวเลขในช่วง 0 - 1;

0 คือ โปร่งใส (มองไม่เห็น)

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
<head>
<style>
div {
    background-color: red;
    opacity: 0.2;
    filter: Alpha(opacity=50);
}
</style>
</head>
<body>

<div>Test Opacity = 0.2</div>

</body>
</html>

ตัวอย่างผลการรัน:
Selection_300.png
Selection_300.png (16.58 KiB) เปิดดู 76 ครั้ง

1 คือ ทึบแสง

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html>
<head>
<style>
div {
    background-color: red;
    opacity: 1;
    filter: Alpha(opacity=50);
}
</style>
</head>
<body>

<div>Test Opacity = 1</div>

</body>
</html>

ตัวอย่างผลการรัน:
Selection_301.png
Selection_301.png (16.28 KiB) เปิดดู 76 ครั้ง


สามารถหาความรู้เพิ่มเติมได้ที่ :
>> http://www.mindphp.com/%E0%B8%9A%E0%B8% ... 9-css.html
>> http://www.w3schools.com/css/default.asp

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน