Teks tidak terlalu mudah dibaca di latar belakang gambar yang berbeda

30

Saya datang ke sini mencari sedikit bantuan desain atau saran tentang bagaimana saya dapat meningkatkan yang berikut:

Seperti judulnya, saya memiliki spanduk situs web dengan banyak teks yang ditampilkan pada gambar yang berbeda sebagai latar belakang. Sekarang, karena sebagian besar gambar gelap, saya telah menetapkan warna font sebagai putih. Tetapi meskipun demikian, beberapa teks tidak terlalu dapat dibaca pada beberapa gambar seperti:

standar

Karena saya bekerja dengan CSS, saya sudah mencoba berbagai opsi seperti:

Menambahkan Bayangan Teks:

dengan bayangan teks

CSS:

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

Juga mencoba, membuat kotak semi-transparan di sekitar teks:

dengan latar belakang semi-transparan

Demo

Saya merasa kotak yang terlihat tidak pada tempatnya.

Saya telah membuat biola untuk siapa saja yang tahu CSS. Jika tidak, silakan saran saya hanya berdasarkan imajinasi Anda.

PS: Anda juga bisa memberi saran untuk menggunakan font yang berbeda jika itu akan membuatnya lebih baik.

website-design color text images css AyB
sumber
4
Cahaya luar hitam lembut pada teks Anda (bayangan ke segala arah) kadang-kadang cukup untuk memberikan kontras lebih tanpa terlihat seperti Anda telah meletakkan apa pun di belakangnya.
John
@ John Saya berpikir tentang cahaya juga, tetapi tanpa memiliki banyak efek cahaya, masalah teks yang tidak dapat dibaca tetap ada dan karena saya bekerja di situs web perusahaan, saya memutuskan untuk mencoretnya karena itu akan terlihat tidak profesional. Terima kasih atas sarannya!
AyB
2
Seharusnya menekankan betapa halusnya aku berbicara. Seperti 20-30% dan penyebaran luas di mana Anda tidak akan menyadarinya. Jika terlihat seperti cahaya, atau Anda dapat melihat transisi - itu terlalu gelap. Gunakan secukupnya untuk membuat gambar di sekitarnya memudar menjadi nada yang sedikit lebih gelap di mana huruf tersebut bertemu.
John
@John Hmm terdengar menarik, saya akan mencobanya juga.
AyB

Jawaban:

22

Sebagai alternatif dari jawaban yang sudah sangat bagus, bagaimana dengan menambahkan div hitam dengan 50% opacity di belakang teks?

masukkan deskripsi gambar di sini

Ini akan memungkinkan font bekerja pada dasarnya gambar apa pun juga.

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

CONTOH

SaturnsEye
sumber
@ICanHasCheezburger Tidak masalah! Saya menghadapi masalah yang sama banyak melakukan pekerjaan situs web seperti gambar spanduk dan saya menemukan ini menjadi cara yang paling menyenangkan untuk menyiasati karena berfungsi dengan baik sebagian besar waktu.
SaturnsEye
17

Saya sarankan untuk membuat huruf tebal (hanya perubahan berat, bukan font itu sendiri) dan merespek bayangan sehingga mendefinisikan semua tepi huruf:

Contoh 1

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

Anda bahkan dapat menggabungkan lebih dari satu bayangan teks untuk membuat outline yang pasti dan juga blur:

Contoh 2

text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000;
Andrew Leach
sumber
Terima kasih atas waktu Anda! Saya sudah berencana untuk menggunakan yang text-shadowdisediakan oleh Anda bersama dengan solusi SaturnsEye.
AyB
@Ican saya tidak melakukan kotak karena Anda bilang tidak. "Juga mencoba, membuat kotak semi-transparan di sekitar teks. Aku merasa kotak yang terlihat tidak pada tempatnya." Tapi situs Anda, panggilan Anda ...
Andrew Leach
Benar itu, tetapi setelah melihat solusi SaturnsEye saya menyadari itu memang terlihat bagus ketika ukuran dan warna diubah. Maaf untuk pilihan kata yang salah. Mungkin saya harus menjelaskan lebih baik lain kali.
AyB
3

Berikan latar belakang hitam transparan dan beberapa bantalan

background-color: rgba (0,0,0,0.5);

padding: 0,5em;

Cukup bermain-main dengan angka-angka itu tetapi itu akan memberi Anda hasil yang dapat digunakan.

Philip Feldmann
sumber
Terima kasih atas waktunya! Saya menyadari bahwa jika Anda memiliki kasus di mana elemen dalam perlu memiliki opacity yang berbeda di luar, opacityproperti tidak akan membantu dalam kasus ini sedangkan pengaturan opacity di background-colorproperti melakukan pekerjaan. Seperti di sini
AyB