ภาพ CSS โปร่งใส / ทึบแสง
การใช้ CSS เป็นเรื่องง่ายที่จะสร้างภาพโปร่งใส
หมายเหตุ: ความทึบ CSS คุณสมบัติเป็นส่วนหนึ่งของข้อเสนอแนะของ W3C CSS3
ตัวอย่างเพิ่มเติม
สร้างกล่องข้อความมีภาพพื้นหลังโปร่งใส
ตัวอย่างที่ 1 - สร้างภาพโปร่งใส
ความโปร่งใสในคุณสมบัติ CSS3เป็นความทึบแสง
ครั้งแรกที่เราจะแสดงวิธีการสร้างภาพโปร่งใสด้วย CSS
ภาพปกติ
ภาพเดียวกันด้วยความโปร่งใส:
พิจารณา CSS ต่อไปนี้:
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
IE9, Firefox, Chrome, เบราเซอร์ Opera และ Safari ใช้คุณสมบัติความโปร่งใสของภาพอาจจะกลายเป็นสีขาวขุ่น มูลค่าทรัพย์สินความทึบ 0.0-1.0 ค่าที่น้อยกว่าทำให้องค์ประกอบความโปร่งใสมากขึ้น
IE8 และรุ่นก่อนหน้าใช้ตัวกรอง: อัลฟา (ทึบ = x) X สามารถใช้ค่า 0-100 มีค่าต่ำทำให้องค์ประกอบความโปร่งใสมากขึ้น
ตัวอย่างที่ 2 - โปร่งใสภาพ - โฉบผล
เลื่อนเมาส์ไปที่ภาพนี้:
ลักษณะ CSS:
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
บล็อกแรกเป็นโค้ด CSS ในตัวอย่างที่ 1 และไม่ชอบ นอกจากนี้เรายังเพิ่มสิ่งที่เกิดขึ้นเมื่อผู้ใช้เลื่อนเมาส์วางกว่าหนึ่งของภาพ ในกรณีนี้เมื่อผู้ใช้เลื่อนเมาส์ไปที่ภาพที่เราหวังว่าภาพที่มีความชัดเจน
นี่คือCSS: ความทึบ = 1
IE8และการใช้งานก่อนหน้านี้: ตัวกรอง: อัลฟา (ทึบ = 100 )
เมื่อตัวชี้เมาส์ออกไปจากภาพภาพจะถูก re-โปร่งใส
ตัวอย่างที่ 3 - ข้อความกล่องใส
ข้อความในกล่องโปร่งใส ข้อความในกล่องโปร่งใส ข้อความในกล่องโปร่งใส ข้อความในกล่องโปร่งใส ข้อความในกล่องโปร่งใส ข้อความในกล่องโปร่งใส ข้อความในกล่องโปร่งใส ข้อความในกล่องโปร่งใส ข้อความในกล่องโปร่งใส ข้อความในกล่องโปร่งใส ข้อความในกล่องโปร่งใส ข้อความในกล่องโปร่งใส ข้อความในกล่องโปร่งใส
รหัสที่มาเป็นดังนี้:
<head>
<style>
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
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.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
ครั้งแรกที่เราสร้างความสูงคงที่และความกว้างของส่วน div กับภาพพื้นหลังและชายแดน จากนั้นเราจะสร้างองค์ประกอบ div ขนาดเล็กภายใน div แรก นอกจากนี้ยัง DIV มีความกว้างคงสีพื้นหลังชายแดน - และมันมีความโปร่งใส ภายใน div โปร่งใสเราเพิ่มข้อความบางส่วนภายในองค์ประกอบ P