Văn bản không dễ đọc trên các hình ảnh khác nhau

Tôi đã đến đây để tìm kiếm một chút trợ giúp thiết kế hoặc lời khuyên về cách tôi có thể cải thiện những điều sau:

Giống như tiêu đề nói, tôi đang có một biểu ngữ trang web với nhiều văn bản được hiển thị trên các hình ảnh khác nhau làm hình nền. Bây giờ, vì hầu hết các hình ảnh đều tối, tôi đã đặt màu phông chữ là màu trắng. Nhưng ngay cả sau đó, một số văn bản không dễ đọc trên một vài hình ảnh như:

Vì tôi đang làm việc với CSS, tôi đã thử các tùy chọn khác nhau như:

Thêm bóng văn bản:

CSS:

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

Cũng đã thử, tạo một hộp bán trong suốt xung quanh văn bản:

Bản giới thiệu

Tôi cảm thấy cái hộp trông không đúng chỗ.

Tôi đã tạo ra một câu đố cho bất cứ ai biết CSS. Nếu không, xin vui lòng tư vấn cho tôi chỉ dựa trên trí tưởng tượng của bạn.

PS: Bạn cũng có thể tư vấn về việc sử dụng một phông chữ khác nếu điều đó sẽ giúp nó nổi bật hơn.

Thay thế cho các câu trả lời tuyệt vời, làm thế nào về việc thêm một div đen với độ mờ 50% đằng sau văn bản?

Điều này sẽ cho phép phông chữ hoạt động trên cơ bản bất kỳ hình ảnh nào.

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

THÍ DỤ

Tôi đề nghị làm cho phông chữ đậm (chỉ là thay đổi trọng lượng, không phải chính phông chữ) và xác định lại bóng để nó xác định tất cả các cạnh của các chữ cái:

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

Bạn thậm chí có thể kết hợp nhiều hơn một bóng văn bản để tạo ra một phác thảo xác định cũng như làm mờ:

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

Cung cấp cho nó một nền trong suốt màu đen và một số phần đệm

màu nền: rgba (0,0,0,0,5);

đệm: 0,5em;

Đơn giản chỉ cần chơi một chút với những con số đó nhưng nó sẽ cho bạn một kết quả có thể sử dụng được.