CSS Image Transparent ชี้เมาส์แล้วภาพจาง

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

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

M008
PHP Hero Member
PHP Hero Member
โพสต์: 109
ลงทะเบียนเมื่อ: 03/05/2013 10:44 am

CSS Image Transparent ชี้เมาส์แล้วภาพจาง

โพสต์โดย M008 » 20/05/2013 7:03 pm

เป็นอีกเทคนิคหนึ่งที่ทำให้เว็บไซต์ดูมีความน่าสนใจมากยิ่งขึ้น คือ CSS Image Transparent เป็นการชี้เมาส์แล้วทำให้ภาพจางหรือมีสีที่เปลี่ยนไป ดังรูป
Transparent.jpg
Transparent.jpg (41.39 KiB) เปิดดู 1592 ครั้ง

CSS :

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

.imgtransparent
{
opacity:1.0; /* ค่าความจาง */
filter:alpha(opacity=100); /* สำหรับ IE8 ขึ้นไป */
}
.imgtransparent:hover
{
opacity:0.4; /* ค่าความจาง */
filter:alpha(opacity=40); /* สำหรับ IE8 ขึ้นไป */
}

HTML:

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

<img class="imgtransparent" src="image.png"height="100" width="200" />

คำอธิบายรูปภาพ
src="ให้ใส่ที่อยู่รูปภาพที่ต้องการเข้าไป"

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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

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