วิธีเปลี่ยนคุณสมบัติ CSS “display” + “opacity”

ขั้นตอนที่ 2: ตั้งค่าคุณสมบัติ 'แสดง'

ถัดไป เข้าถึงคอนเทนเนอร์ div โดยใช้ชื่อคลาส “ รายการหลัก ” และตั้งค่า “ แสดง ' คุณสมบัติ:

ที่นี่ ค่าของ “ แสดง ” คุณสมบัติถูกตั้งค่าเป็น “ ปิดกั้น ” สำหรับใช้ความกว้างของหน้าจอทั้งหมด

ขั้นตอนที่ 3: เพิ่มภาพพื้นหลัง

จากนั้น ใช้คุณสมบัติ CSS ต่อไปนี้กับคอนเทนเนอร์ div ที่เข้าถึง:

ในข้อมูลโค้ดที่ระบุข้างต้น:

• “ ความสูง ' และ ' ความกว้าง ” คุณสมบัติกำหนดขนาดขององค์ประกอบที่กำหนด
• “ ภาพพื้นหลัง ” คุณสมบัติ CSS ใช้สำหรับแทรกรูปภาพด้วยความช่วยเหลือของ “ URL() ” ฟังก์ชันที่ด้านหลังขององค์ประกอบ
• “ ความทึบ ” กำหนดระดับความทึบขององค์ประกอบ ระดับความทึบแสดงให้เห็นถึงระดับความโปร่งใส โดยที่ “ 1 ” ใช้เพื่อความไม่โปร่งใส และ “ 0.5 ' สำหรับ ' ห้าสิบ% ” ความโปร่งใส
• “ การเปลี่ยนแปลง ” ใน CSS อนุญาตให้ผู้ใช้เปลี่ยนค่าคุณสมบัติได้อย่างราบรื่นในช่วงเวลาที่กำหนด
• “ ขอบ ” กำหนดพื้นที่นอกขอบเขตที่กำหนดรอบองค์ประกอบ

เอาต์พุต

ขั้นตอนที่ 4: ใช้ “:hover” Pseudo Selector

ตอนนี้ เข้าถึงคอนเทนเนอร์ div ตาม “ : เลื่อน ” ตัวเลือกหลอกที่ใช้สำหรับเลือกองค์ประกอบเมื่อเราเลื่อนเมาส์ไปเหนือ:

จากนั้นตั้งค่า “ ความทึบ ” ขององค์ประกอบที่เลือกเป็น “ 1 ” เพื่อลบความโปร่งใส

เอาต์พุต

นั่นคือทั้งหมดที่เกี่ยวกับการตั้งค่าคุณสมบัติ CSS “display” และ “opacity” ของ CSS

บทสรุป

ในการตั้งค่าคุณสมบัติการเปลี่ยนผ่าน 'การแสดงผล' และ 'ความทึบ' ก่อนอื่นให้สร้างคอนเทนเนอร์ div โดยใช้องค์ประกอบ