การจัดสไตล์รูปภาพด้วย CSS
เพื่อจัดสไตล์รูปภาพด้วย CSS คุณต้องใช้คุณสมบัติเช่น height, width, -moz-opacity ฯลฯ มาดูวิธีสร้างภาพโปร่งใสด้วยคุณสมบัติ -moz-opacity:
คุณสมบัติ -moz-opacity ของภาพใช้ตั้งค่าความทึบของภาพ ใช้สร้างภาพโปร่งใสใน Mozilla IE ใช้ filter:alpha(opacity=x) สำหรับสร้างภาพโปร่งใส
ตัวอย่าง
ลองรันโค้ดต่อไปนี้เพื่อจัดสไตล์รูปภาพและตั้งค่าความทึบด้วย CSS:
<html>
<head>
</head>
<body>
<img style="border:1px solid red; -moz-opacity:0.2; filter:alpha(opacity=50);"
src="https://www.tutorialspoint.com/assets/videotutorials/courses/css_online_training/380_course_215_image.jpg" />
</body>
</html>
คุณสมบัติสำคัญสำหรับรูปภาพ:
- width / height - ขนาดภาพ
- border - ขอบภาพ
- opacity - ความทึบ (มาตรฐาน CSS3, รองรับทุกเบราว์เซอร์ใหม่)
- -moz-opacity - สำหรับ Firefox เก่า (deprecated)
- filter:alpha(opacity=x) - สำหรับ IE เก่า (deprecated)
แนะนำ: ใช้ opacity: 0.5; แทน (รองรับทุกเบราว์เซอร์สมัยใหม่)
