การสร้างภาพโปร่งใสด้วย CSS เป็นเรื่องง่าย
ซีเอสเอ opacity คุณสมบัติเป็นส่วนหนึ่งของข้อเสนอแนะ CSS3 ที่
ตัวอย่างที่ 1 - การสร้างภาพใส
สถานที่ให้บริการ CSS3 เพื่อความโปร่งใสเป็น opacity
ครั้งแรกที่เราจะแสดงวิธีการสร้างภาพโปร่งใสด้วย CSS
ภาพปกติ:
ภาพเดียวกันด้วยความโปร่งใส:
ดูที่ CSS ต่อไปนี้:
opacity คุณสมบัติสามารถใช้ค่า 0.0-1.0 มูลค่าต่ำกว่าความโปร่งใสมากขึ้น
IE8 และการใช้งานก่อนหน้านี้ filter:alpha(opacity=x) x ที่สามารถใช้ค่าจาก 0 - 100 ค่าที่ต่ำกว่าทำให้องค์ประกอบความโปร่งใสมากขึ้น
ตัวอย่างที่ 2 - โปร่งใสภาพ - วางเมาส์ผล
เลื่อนเมาส์ไปที่ภาพนี้:
CSS ที่มีลักษณะเช่นนี้
ตัวอย่าง
img
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
ลองตัวเอง» ซีเอสเอบล็อกแรกจะคล้ายกับรหัสในตัวอย่างที่ 1 นอกจากนี้เราได้เพิ่มสิ่งที่ควรจะเกิดขึ้นเมื่อผู้ใช้เลื่อนผ่านหนึ่งของภาพ ในกรณีนี้เราต้องการภาพที่จะไม่เกิดความโปร่งใสเมื่อผู้ใช้เลื่อนผ่านมัน ซีเอสเอสำหรับเรื่องนี้คือ opacity:1;
เมื่อชี้เมาส์ย้ายออกไปจากภาพที่ภาพจะมีความโปร่งใสอีกครั้ง
ตัวอย่างที่ 3 - ข้อความในกล่องใส
นี่คือข้อความบางอย่างที่ถูกวางไว้ในกล่องโปร่งใส
รหัสที่มาลักษณะเช่นนี้:
ตัวอย่าง
<html>
<head>
<style>
div.background
{
background: url(/css/klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
ลองตัวเอง» ครั้งแรกที่เราสร้าง <div> องค์ประกอบ (class="background") ที่มีภาพพื้นหลังและเส้นขอบ จากนั้นเราจะสร้างอีก <div> (class="transbox") ภายในแรก <div> <div class="transbox"> มีสีพื้นหลังและเส้นขอบ - div ที่มีความโปร่งใส ภายในโปร่งใส <div> เราเพิ่มข้อความบางส่วนภายใน <p> องค์ประกอบ
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 »