обходной путь для получения альта для Css изображений

Я пришел, чтобы узнать, что мы не можем иметь альт для CSS сгенерированного image.There решение, которые говорят, что, имея титул atribute мы можем получить эффект альта только на зависания на изображении, однако, когда мы отключим css, мы не сможем увидеть этот текст вместо изображения. В моем случае Мне нужен текст, который будет отображаться, даже если css отключен. Есть ли способ обхода текст отображается, когда css отключен.обходной путь для получения альта для Css изображений

<span class="myimageclass"> 
    hi 
    </span> 
    <style> 
    .myimageclass 
    { 
    height: 100px; 
    width: 200px; 

    background-image:url('http://cdn.osxdaily.com/wp- 
    content/uploads/2011/10/NSTexturedFullScreenBackgroundColor.png'); 
    color:red; 
    overflow: hidden; 
    text-indent: -9999px; 



    } 
    </style>

Thanks, Balaji.

источник

2015-06-04 user2345

да альт предназначен только для тега img, и вы не можете предоставить это для созданного CSS изображения. Тем не менее, вы можете использовать javascript для обнаружения отсутствия CSS и затем ввести текст, если CSS отключен. – bbh

спасибо за ваш ответ, поэтому переход с javascript - единственная альтернатива. – user2345

Я боюсь, потому что это изображение с CSS, которое теперь может быть лучшим вариантом. Когда CSS включен, вам понадобится другой механизм для отображения текста alt, и javascript может сыграть эту роль. – bbh

Вы можете использовать text-indent и overflow: hidden.

Это не гибкий метод, но я надеюсь, что вы сможете его использовать.

.image { 
 
    width: 200px; 
 
    height: 100px; 
 
    display: block; /* it needs for inline elements like span */ 
 
    background: url(http://cdn.osxdaily.com/wp-content/uploads/2011/10/NSTexturedFullScreenBackgroundColor.png); 
 
    overflow: hidden; 
 
    text-indent: -9999px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="image js-image"> 
 
    Image alt 
 
</div> 
 

 
<button class="js-button">On/Off styles</button> 
 

 
<script> 
 
    $('.js-button').click(function() { 
 
    $('.js-image').toggleClass('image'); 
 
    }); 
 
</script>

источник

2015-06-04 06:29:11

Спасибо за ответ Philip, поэтому вы говорите вместе с свойством text-indent, нам нужен jquery, чтобы поддержать это. – user2345

@balaji Я добавил jQuery только для демонстрационной кнопки –

Привет, я пробовал с текстовым отступом и переполнением: скрытый, если я использую их, Im не способен видеть изображение или текст, кажется, что я делаю что-то неправильно, проверяя что – user2345

@balaji, это уже SO нить, которая заботится о CSS на странице, вы можете выбрать что-то здесь и точная настройка для ваших нужд: How to determine if CSS has been loaded?

источник

2015-06-04 06:32:36 bbh

Привет, я следил за тем, что предложил Филипп, и это сработало, спасибо за вашу помощь :) – user2345

обходной путь для получения альта для Css изображений

ответ

Смежные вопросы