CSS đáp ứng: Tôi có thể buộc hiển thị văn bản thay thế không?

Question

Tôi đang tập hợp một số CSS đáp ứng cho trang web tôi đang xây dựng và tôi tò mò nếu tôi có thể sử dụng CSS để buộc hình ảnh hiển thị dưới dạng văn bản thay vì hình ảnh. Chúng tôi đang hiển thị các biểu tượng của các nhà tài trợ nhưng vì kích thước biến của chúng rất khó để phù hợp với chúng một cách tự tin vào thiết kế đáp ứng. Vì lý do đó, chúng tôi muốn lưu trữ tên công ty dưới dạng văn bản thay thế và hiển thị thay thế. Tất nhiên chúng ta có thể đặt tên trong một phần tử riêng biệt và chuyển đổi khả năng hiển thị bằng cách sử dụng CSS nhưng sử dụng văn bản thay thế có vẻ là DRYer.

Answer 1

Bạn có thể lưu trữ trong một dữ liệu thuộc tính chứ không phải là alt văn bản, và sau đó làm điều gì đó like this:

<span class='responsive' data-alt='foo'> 
    <img src='http://www.ponyfoo.com/img/thumbnail.png' alt='' /> 
</span> 

@media only screen and (max-width: 300px) { 
    .responsive:before { 
     content: attr(data-alt); 
    } 
    .responsive img { 
     display: none; 
    } 
} 

Lý do bạn không thể làm điều này chỉ với CSS và thẻ img là img là vì chúng là replaced elements, có nghĩa là giả không hoạt động với chúng, và do đó, sử dụng :before không hoạt động với chúng.

cách tiếp cận khác, lấy này vào tài khoản sẽ the following:

<span class='responsive'>foo</span> 

.responsive { 
    background-image: url('http://www.ponyfoo.com/img/thumbnail.png'); 
    text-indent: -9999em; 
    overflow: hidden; 
    width: 180px; 
    height: 180px; 
    display: block; 
} 

@media only screen and (max-width: 300px) { 
    .responsive { 
     background-image: none; 
     text-indent: initial; 
     overflow: initial; 
    } 
} 

Nếu bạn hỏi tôi, tôi thích cách tiếp cận thứ hai nhiều hơn nữa.

Answer 2

Went với:

<div class="cobranding"> 
    <span>Brought to you by</span> 
    <span class="sponsor">Joe Shmoe Inc.</span> 
    <img src="img/graphics/joe_shmoe_logo.jpg"> 
</div> 

Sử dụng CSS để chuyển tầm nhìn của các img hay "nhà tài trợ" dựa trên breakpoint đáp ứng.

Cả hai phương pháp tiếp cận của Nico đều tốt. Nhược điểm duy nhất là các logo của các nhà tài trợ này sẽ được bổ sung thông qua một CMS vì vậy tôi muốn tránh xa mọi giải pháp liên quan đến từng trường hợp CSS (: trước hoặc nền-hình ảnh). Vì lợi ích của thời gian tôi đã đi trước với hai yếu tố chiến lược ở trên.

Answer 3

(trả lời cho bất kỳ những người khác tìm kiếm một giải pháp)

quan trọng sang một bên: Hãy nhớ rằng các mục đích alt: hiển thị thông tin THAY THẾ ý nghĩa (nếu hình ảnh không tải). - vì vậy bất kỳ triển khai nào cũng không được phá vỡ ... (xấu đối với khả năng truy cập & SEO).

Điều đó nói rằng ... Nếu hình ảnh không tải, alt sẽ được hiển thị. Vì vậy, (chưa được kiểm tra) nhưng bạn có thể thử rối tung lên các thuộc tính src bởi javascript ... điều này sẽ gây ra trình duyệt để hiển thị alt kể từ khi hình ảnh sẽ không tải. - bạn có thể tìm thấy cách tiếp cận này cùng với tải trọng hữu ích.

Cũng cần lưu ý: a img bị hỏng không hoạt động giống như một hình ảnh, vì vậy bạn có thể áp dụng một img: trước khi quy tắc css (và sử dụng nội dung: attr (alt))