-
CSS หลักสูตร
- CSS หลักสูตร
- CSS แนะนำโดยย่อ
- CSS ไวยากรณ์
- CSS Id และ Class ผู้เลือก
- CSS สร้าง
- CSS พื้นหลัง(background)
- CSS ข้อความ(text)
- CSS แบบอักษร(Fonts)
- CSS ลิงค์(link)
- CSS ลักษณะของรายการ(ul)
- CSS ตาราง(table)
- CSS รูปแบบกล่อง
- CSS กรอบ(border)
- CSS เส้นแสดงรูปร่าง(outline)
- CSS ขอบ(margin)
- CSS การกรอก(padding)
- CSS การจัดกลุ่มและการสร้างรัง
- CSS ขนาด(Dimension)
- CSS แสดงผล(display)
- CSS ตั้งอยู่(position)
- CSS ลอย(float)
- CSS เป็นเส้นตรง(align)
- CSS การรวมกันของเตอร์
- CSS หลอกชั้นเรียน
- CSS องค์ประกอบหลอก
- CSS ป้าย
- CSS เมนูแบบเลื่อนลง
- CSS แกลเลอรี่ภาพ
- CSS ภาพใส/ทึบแสง
- CSS ภาพโมเสคเทคโนโลยี
- CSS ประเภทสื่อ
- CSS แอตทริบิวต์เตอร์
- CSS ย่อ
- CSS ตัวอย่าง
CSS3 หลักสูตร
- CSS3 หลักสูตร
- CSS3 แนะนำโดยย่อ
- CSS3 กรอบ(border)
- CSS3 พื้นหลัง
- CSS3 การเปลี่ยนแปลงอย่างค่อยเป็นค่อยไป
- CSS3 ผลข้อความ
- CSS3 แบบอักษร
- CSS3 2D เปลี่ยนแปลง
- CSS3 3D เปลี่ยนแปลง
- CSS3 การเปลี่ยนแปลง
- CSS3 นิเมชั่น
- CSS3 หลายคอลัมน์
- CSS3 ส่วนติดต่อผู้ใช้
CSS ออกแบบที่ตอบสนอง
CSS คู่มืออ้างอิง
บทช่วยสอน ภาพ CSS โปร่งใส / ทึบแสง ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ ตัวอย่างเพิ่มเติม,ตัวอย่างที่ 1 - สร้างภาพโปร่งใส,ตัวอย่างที่ 2 - โปร่งใสภาพ - โฉบผล,ตัวอย่างที่ 3 - ข้อความกล่องใส,
ภาพ 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