ฉันใหม่มากกับ HTML / CSS และฉันกำลังพยายามแสดงข้อความบางส่วนเหมือนโปร่งใส 50% จนถึงตอนนี้ฉันมี HTML เพื่อแสดงข้อความที่มีความทึบเต็ม
<html><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></html>อย่างไรก็ตามฉันไม่แน่ใจว่าจะเปลี่ยนความทึบได้อย่างไร ฉันพยายามค้นหาออนไลน์แล้ว แต่ฉันไม่แน่ใจว่าจะทำอย่างไรกับรหัสที่ฉันพบ
คำตอบ:
opacityใช้กับองค์ประกอบทั้งหมดดังนั้นหากคุณมีพื้นหลังเส้นขอบหรือเอฟเฟกต์อื่น ๆ ในองค์ประกอบนั้นองค์ประกอบเหล่านั้นก็จะโปร่งใสเช่นกัน ถ้าคุณเพียงrgbaต้องการให้ข้อความให้เกิดความโปร่งใสการใช้งาน
#foo {
color: #000; /* Fallback for older browsers */
color: rgba(0, 0, 0, 0.5);
font-size: 16pt;
font-family: Arial, sans-serif;
}<font>นอกจากนี้คัดท้ายไกลออกไปจาก ตอนนี้เรามี CSS แล้ว
rgbaมิฉะนั้นคุณควรจะปรับมีเพียง
ตรวจสอบความทึบคุณสามารถตั้งค่าคุณสมบัติ css นี้เป็น div <p>หรือใช้ที่<span>คุณต้องการทำให้โปร่งใส
และอย่างไรก็ตามแท็กแบบอักษรเลิกใช้แล้วให้ใช้ css เพื่อจัดรูปแบบข้อความ
div {
opacity: 0.5;
} แก้ไข: รหัสนี้จะทำให้องค์ประกอบทั้งหมดโปร่งใสหากคุณต้องการสร้าง ** เฉพาะข้อความ ** ตรวจสอบคำตอบแบบโปร่งใส @Mattias Buelens
เพียงใช้rgbaแท็กเป็นสีข้อความของคุณ คุณสามารถใช้ได้opacityแต่จะส่งผลต่อองค์ประกอบทั้งหมดไม่ใช่แค่ข้อความ สมมติว่าคุณมีเส้นขอบก็จะทำให้โปร่งใสเช่นกัน
.text
{
font-family: Garamond, serif;
font-size: 12px;
color: rgba(0, 0, 0, 0.5);
}ทางออกที่ดีที่สุดคือดูที่แท็ก "ความทึบ" ขององค์ประกอบ
ตัวอย่างเช่น:
.image
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}ดังนั้นในกรณีของคุณควรมีลักษณะดังนี้:
<html><span style="opacity: 0.5;"><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></html>อย่างไรก็ตามอย่าลืมว่า HTML5 ไม่รองรับแท็ก
คุณควรใช้ CSS ด้วย :)
สิ่งที่เกี่ยวกับopacityแอตทริบิวต์css ? 0เป็น1ค่า
แต่คุณอาจต้องใช้องค์ประกอบ Dom ที่ชัดเจนมากกว่า "แบบอักษร" ตัวอย่างเช่น:
<html><body><span style=\"opacity: 0.5;\"><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></span></body></html>แน่นอนว่าเป็นข้อมูลเพิ่มเติมฉันขอแนะนำให้คุณใช้การประกาศ CSS นอกองค์ประกอบ html ของคุณ แต่ลองใช้รูปแบบ css แบบอักษรแทนแท็ก html แบบอักษร
สำหรับตัวสร้างสไตล์ css3 ของเบราว์เซอร์ข้ามไปที่http://css3please.com/
ง่าย! หลังจากของคุณ:
<font color=\"black\" face=\"arial\" size=\"4\">เพิ่มอันนี้:
<font style="opacity:.6"> คุณเพียงแค่ต้องเปลี่ยน ".6" สำหรับเลขฐานสิบระหว่าง 1 ถึง 0
ไม่มีคุณสมบัติCSSเช่นความทึบของพื้นหลังที่คุณสามารถใช้ได้เฉพาะสำหรับการเปลี่ยนความทึบหรือความโปร่งใสของพื้นหลังขององค์ประกอบโดยไม่ส่งผลกระทบต่อองค์ประกอบลูกในทางกลับกันหากคุณจะพยายามใช้คุณสมบัติความทึบของ CSS มันจะไม่เพียง แต่เปลี่ยน ความทึบของพื้นหลัง แต่เปลี่ยนความทึบขององค์ประกอบลูกทั้งหมดด้วย ในสถานการณ์เช่นนี้คุณสามารถใช้สี RGBA ที่แนะนำใน CSS3 ซึ่งรวมถึงความโปร่งใสของอัลฟาเป็นส่วนหนึ่งของค่าสี การใช้สี RGBA คุณสามารถกำหนดสีของพื้นหลังและความโปร่งใสได้
ลองเล่นด้วย mix-blend-mode: multiply;
color: white;
background: black;
mix-blend-mode: multiply;