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

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

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

M008
PHP Hero Member
PHP Hero Member
Posts: 109
Joined: 03/05/2013 10:44 am

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

Post by M008 » 20/05/2013 7:03 pm

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

Code: Select all

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

Code: Select all

<img class="imgtransparent" src="image.png"height="100" width="200" />
คำอธิบายรูปภาพ
src="ให้ใส่ที่อยู่รูปภาพที่ต้องการเข้าไป"

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 8 guests