เรียนรู้เกี่ยวกับความทึบของ CSS3

ทำให้พื้นหลังของคุณโปร่งใส

สิ่งหนึ่งที่คุณสามารถทำได้ง่ายๆในการออกแบบสิ่งพิมพ์ แต่ไม่ใช่บนเว็บคือการซ้อนทับข้อความบนภาพหรือพื้นหลังสีและเปลี่ยนความโปร่งแสงของภาพเพื่อให้ข้อความจางหายไปในพื้นหลัง แต่มีคุณสมบัติใน CSS3 ที่จะช่วยให้คุณสามารถเปลี่ยนความทึบขององค์ประกอบของคุณเพื่อให้พวกเขาจางหายไปทั้งภายในและภายนอก: ความทึบ

วิธีการใช้คุณสมบัติ Opacity

คุณสมบัติ opacity ใช้ค่าของความโปร่งใสจาก 0.0 ถึง 1.0

0.0 มีความโปร่งใส 100% ทุกอย่างที่ด้านล่างจะแสดงองค์ประกอบทั้งหมด 1.0 เป็นสีทึบ 100% ที่ด้านล่างขององค์ประกอบจะแสดงผ่าน

ดังนั้นเพื่อกำหนดองค์ประกอบให้โปร่งใส 50% คุณจะเขียน:

ความทึบ: 0.5;

ดูตัวอย่างบางส่วนของความโปร่งแสงในการดำเนินการ

อย่าลืมทดสอบในเบราว์เซอร์รุ่นเก่า

ทั้ง IE 6 และ 7 ไม่สนับสนุนคุณสมบัติการทึบของ CSS3 แต่คุณไม่ได้โชคดี แต่ IE สนับสนุนตัวกรอง alpha คุณสมบัติเฉพาะของ Microsoft ตัวกรองอัลฟ่าใน IE ยอมรับค่าตั้งแต่ 0 (โปร่งใส) ถึง 100 (สมบูรณ์แบบทึบแสง) ดังนั้นเพื่อให้เกิดความโปร่งใสใน IE คุณควรเพิ่มความทึบให้กับคูณด้วย 100 และเพิ่มตัวกรองอัลฟาไปยังสไตล์ของคุณ:

ตัวกรอง: alpha (ความทึบ = 50);

ดูตัวกรองอัลฟาที่กำลังทำงานอยู่ (IE only)

และใช้คำนำหน้าของเบราเซอร์

คุณควรใช้ -moz- และ -webkit-prefixes เพื่อให้เบราว์เซอร์ Mozilla และ Webkit เวอร์ชันเก่าสนับสนุนเวอร์ชันนี้มากเกินไป:

ความโปร่งใสของเว็บไซด์: 0.5;
-moz-opacity: 0.5;
ความทึบ: 0.5;

ใส่คำนำหน้าของเบราเซอร์ทุกครั้งก่อนเสมอและคุณสมบัติสุดท้ายของ CSS3 ที่ถูกต้อง

ทดสอบคำนำหน้าของเบราเซอร์ในเบราว์เซอร์ Mozilla และ Webkit ที่เก่ากว่า

คุณสามารถสร้างภาพได้อย่างโปร่งใส

ตั้งค่าความทึบบนภาพเองและจะจางหายไปในพื้นหลัง นี่เป็นประโยชน์สำหรับ ภาพพื้นหลัง

และถ้าคุณเพิ่มแท็ก anchor คุณสามารถสร้างเอ ฟเฟ็กต์เลื่อนได้ โดยการเปลี่ยนความทึบของภาพ

a: hover img {
ตัวกรอง: alpha (ความทึบ = 50)
ตัวกรอง: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0.5;
ความโปร่งใสของเว็บไซด์: 0.5;
ความทึบ: 0.5;
}

มีผลต่อ HTML นี้:

ทดสอบรูปแบบข้างต้นและ HTML ในการดำเนินการ

ใส่ข้อความลงในรูปภาพของคุณ

ด้วยความทึบคุณสามารถวางข้อความไว้เหนือรูปภาพและทำให้ภาพดูเหมือนจางหายไปที่มีข้อความอยู่

เทคนิคนี้ยุ่งยากเล็กน้อยเพราะคุณไม่สามารถเลือนหายไปได้เนื่องจากภาพจะจางหายไปทั้งหมด และคุณไม่สามารถจางหายไป ในกล่องข้อความ เพราะข้อความจะจางหายไปเช่นกัน

1. อันดับแรกคุณสร้างคอนเทนเนอร์ DIV และวางภาพภายใน:

   
   

2. ทำตามภาพด้วย DIV ที่ว่างเปล่านี่คือสิ่งที่คุณจะทำให้โปร่งใส

   
   
   

3. สิ่งสุดท้ายที่คุณเพิ่มลงใน HTML คือ DIV ที่มีข้อความอยู่:

   
   
   
   นี่คือสุนัขของฉัน Shasta เขาไม่น่ารักใช่ไหม!

4. คุณจัดรูปแบบด้วยการวางตำแหน่ง CSS เพื่อวางข้อความเหนือรูปภาพ ฉันวางข้อความไว้ทางด้านซ้าย แต่คุณสามารถวางไว้ทางด้านขวาโดยการเปลี่ยนสองด้านซ้าย: 0; คุณสมบัติไปทางขวา: 0; .

   #ภาพ {
   ตำแหน่ง: ญาติ;
   ความกว้าง: 170 พิกเซล;
   ความสูง: 128px;
   margin: 0;
   }
   #text {
   position: absolute;
   ด้านบน: 0;
   ซ้าย: 0;
   ความกว้าง: 60px;
   ความสูง: 118px;
   พื้นหลัง: # fff;
   padding: 5px;
   }
   #text {
   ตัวกรอง: อัลฟา (ความทึบ = 70);
   ตัวกรอง: progid: DXImageTransform.Microsoft.Alpha (ความทึบ = 70);
   -moz-opacity: 0.70;
   ความทึบ: 0.7;
   }
   #words {
   position: absolute;
   ด้านบน: 0;
   ซ้าย: 0;
   ความกว้าง: 60px;
   ความสูง: 118px;
   พื้นหลัง: โปร่งใส
   padding: 5px;
   }

ดูว่ามีลักษณะอย่างไร