Làm cách nào để tạo văn bản đáp ứng ở đầu hình ảnh?

Question

Tôi thực sự không chắc chắn làm thế nào để đặt câu hỏi này theo bất kỳ cách nào khác, nhưng tôi đang cố gắng tải văn bản lên trên một hình ảnh - dường như là một nhiệm vụ phức tạp, nhưng tôi đã sử dụng nó this hướng dẫn. Thật không may, hướng dẫn hơi lỗi thời và tôi không thể tìm ra cách để thay đổi động cả kích thước phông chữ và kích thước khoảng dành cho thiết bị di động mà vẫn duy trì văn bản ở đúng vị trí trên đầu hình ảnh.

Khi cửa sổ được thay đổi kích thước văn bản và hộp không thay đổi kích thước đúng cách (nó tràn bên ngoài hình ảnh).

Tôi đã thử tỷ lệ phần trăm cũng như các kỹ thuật khác có ít may mắn. CSS tôi đang sử dụng để hiển thị văn bản trên hình ảnh với nền có thể được xem bên dưới.

Phương pháp hay nhất để che phủ văn bản trên hình ảnh là gì và làm cách nào để làm cho văn bản trở nên nhạy cảm? Đây là những gì tôi đang cố gắng sử dụng cho các trình duyệt trên máy tính để bàn ngay bây giờ:

.herotext span { 
    position:  absolute; 
    top:   80%; 
    font-family: 'museo_slab500'; 
    font-size: 150%; 
    color:  #fff; 
    padding-left: 20px; 
    width:  40%; 
    line-height: 35px; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.7); 
} 

Có ai có lời khuyên nào về cách xử lý đúng ngày này không? Bài viết tôi đề cập ở trên là từ năm 2009 và tôi nghi ngờ đây không phải là cách tốt nhất để che phủ văn bản.

Answer 1

Dưới đây là những thay đổi tôi sẽ thực hiện:

• Chức các span sử dụng bottom hơn top, vì vậy bạn luôn luôn có một biên độ cụ thể giữa nhịp và phía dưới của hình ảnh.
• Sử dụng một tỷ lệ phần trăm dựa trên line-height để nó sẽ thay đổi tương ứng với các font-size
• Thêm một số đệm ở bên phải của nhịp, vì vậy văn bản không đụng phải lên trên các cạnh của nhịp

Cập nhật CSS:

.herotext span { 
    position: absolute; 
    bottom:  20px; 
    font-family: 'museo_slab500'; 
    font-size: 150%; 
    color:  #fff; 
    padding:  0 20px; 
    width:  40%; 
    line-height: 150%; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.7); 
}