ข้อความไม่สามารถอ่านได้บนพื้นหลังภาพที่แตกต่างกัน

30

ฉันมาที่นี่เพื่อค้นหาความช่วยเหลือหรือคำแนะนำเล็กน้อยเกี่ยวกับวิธีที่ฉันสามารถปรับปรุงสิ่งต่อไปนี้:

เช่นเดียวกับชื่อกล่าวว่าฉันมีแบนเนอร์เว็บไซต์ที่มีข้อความหลายข้อความแสดงบนภาพที่แตกต่างกันเป็นพื้นหลัง ตอนนี้เนื่องจากภาพส่วนใหญ่มืดฉันได้ตั้งค่าสีฟอนต์เป็นสีขาว แต่ถึงกระนั้นข้อความบางส่วนก็ไม่สามารถอ่านได้ในสองภาพเช่น:

มาตรฐาน

ตั้งแต่ฉันทำงานกับ CSS ฉันได้ลองใช้ตัวเลือกต่าง ๆ เช่น:

การเพิ่มเงาข้อความ:

ด้วยเงาข้อความ

CSS:

text-shadow: 3px 3px 0px #000;

ลองสร้างกล่องกึ่งโปร่งใสรอบข้อความ:

ด้วยพื้นหลังกึ่งโปร่งใส

การสาธิต

ฉันรู้สึกว่ากล่องหนึ่งมองออกไปนอกสถานที่

ฉันได้สร้างซอสำหรับผู้ที่รู้จัก CSS ถ้าไม่โปรดแนะนำให้ฉันตามจินตนาการของคุณคนเดียว

PS: คุณสามารถให้คำแนะนำในการใช้แบบอักษรที่แตกต่างกันถ้ามันจะช่วยให้มันโดดเด่นกว่า

— AYB
แหล่งที่มา

4

แสงสีดำด้านนอกนุ่มนวลบนข้อความของคุณ (เงาในทุกทิศทาง) บางครั้งก็เพียงพอที่จะให้ความเปรียบต่างมากขึ้นโดยไม่มองว่าคุณได้วางอะไรไว้ข้างหลัง

— จอห์น

@ จอห์นฉันคิดเกี่ยวกับการเรืองแสงเช่นกัน แต่หากไม่มีเอฟเฟกต์เรืองแสงจำนวนมากปัญหาของข้อความที่ไม่สามารถอ่านได้ยังคงอยู่และเนื่องจากฉันทำงานบนเว็บไซต์ของ บริษัท ฉันจึงตัดสินใจที่จะเลิกใช้งาน ขอบคุณสำหรับคำแนะนำ!

— AyB

2

ควรเน้นว่าฉันพูดจาลึกซึ้งเพียงใด เช่นเดียวกับ 20-30% และกระจายกว้างที่คุณแทบจะไม่สังเกตเห็น หากดูเหมือนว่าเรืองแสงหรือคุณสามารถเห็นการเปลี่ยนแปลง - มันมืดเกินไป ใช้เพียงพอที่จะทำให้ภาพโดยรอบจางหายไปเป็นโทนสีเข้มเล็กน้อยซึ่งตรงกับตัวอักษร

— จอห์น

@John Hmm ฟังดูน่าสนใจฉันจะลองดูนะ

— AyB

22

ในฐานะที่เป็นทางเลือกแทนคำตอบที่ยอดเยี่ยมแล้ววิธีเพิ่ม div ดำด้วยความทึบ 50% หลังข้อความ

ป้อนคำอธิบายรูปภาพที่นี่

นี้จะช่วยให้แบบอักษรทำงานบนพื้นภาพใด ๆ ด้วย

div {
    position:absolute;
    top:250px;
    left:140px;
    width:500px;
    height:50px;
    background-color:black;
    z-index:0;
    opacity:0.5;
}

ตัวอย่าง

— SaturnsEye
แหล่งที่มา

@ICanHasCheezburger ไม่มีปัญหา! ฉันประสบปัญหาเดียวกันกับการทำงานของเว็บไซต์จำนวนมากเช่นภาพแบนเนอร์และฉันพบว่านี่เป็นวิธีที่น่าพอใจที่สุดในการเข้าถึงมันเพราะมันใช้งานได้ดีเกือบตลอดเวลา

— SaturnsEye

17

ฉันขอแนะนำให้สร้างแบบอักษรหนา (เพียงการเปลี่ยนแปลงของน้ำหนักไม่ใช่แบบอักษรของตัวเอง) และรับรองเงาเพื่อที่จะกำหนดขอบทั้งหมดของตัวอักษร:

ตัวอย่างที่ 1

font-family: Raleway;
font-weight:900;
text-shadow: 0px 0px 3px #000;

คุณสามารถรวมเงาข้อความมากกว่าหนึ่งรายการเพื่อสร้างโครงร่างที่แน่นอนรวมถึงความเบลอ:

ตัวอย่างที่ 2

text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000;

— แอนดรูกรอง
แหล่งที่มา

ขอขอบคุณสำหรับเวลาของคุณ! ฉันวางแผนที่จะใช้สิ่งที่text-shadowคุณให้พร้อมกับโซลูชันของ SaturnsEye

— AyB

@ ฉันไม่ได้ทำกล่องเพราะคุณบอกว่าไม่ "ลองทำด้วยการสร้างกล่องกึ่งโปร่งใสรอบข้อความฉันรู้สึกว่ากล่องนั้นดูไม่สวย" แต่เว็บไซต์ของคุณโทรของคุณ ...

— แอนดรูกรอง

จริงอยู่ที่ แต่หลังจากเห็นวิธีแก้ปัญหาของดาวเสาร์ฉันก็รู้ว่ามันดูดีเมื่อขนาดและสีเปลี่ยนไป ขออภัยในการเลือกคำที่ไม่ถูกต้อง บางทีฉันควรอธิบายให้ดีขึ้นในครั้งต่อไป

— AyB

3

ให้พื้นหลังโปร่งใสสีดำและมีช่องว่างภายใน

สีพื้นหลัง: rgba (0,0,0,0.5);

การขยาย: 0.5em;

เพียงแค่เล่นกับตัวเลขเหล่านั้นเพียงเล็กน้อย แต่ควรให้ผลลัพธ์ที่ใช้ได้

— Philip Feldmann
แหล่งที่มา

ขอบคุณที่สละเวลา! ฉันรู้ว่าถ้าคุณมีกรณีที่องค์ประกอบภายในต้องมีความทึบในด้านนอกที่แตกต่างกันopacityคุณสมบัติจะไม่ช่วยในกรณีนี้ในขณะที่การตั้งค่าความทึบในbackground-colorคุณสมบัติการทำงาน ชอบที่นี่

— AyB