Могу ли я стиль изображения ALT с помощью CSS?

Ответ 1

Настройка тега img color работает

img {color:#fff}

http://jsfiddle.net/YEkAt/

body {background:#000022}
img {color:#fff}

<img src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" />

Ответ 2

Конечно, вы можете!

http://jsfiddle.net/VfTGW/

Я делаю это как резерв для изображений заголовков заголовков, я думаю, что некоторые версии IE не будут соблюдаться. Изменить: или, по-видимому, Chrome - я даже не вижу в демо-версии alt текст (?). Firefox работает хорошо.

img {
  color: green;
  font: 40px Impact;
}

<img src="404" alt="Alt Text">

Ответ 3

Вы не можете начертить атрибут alt непосредственно в css. Однако alt наследует стили элемента, на котором находится alt, или того, что наследуется его родителем:

<div style="background-color:black; height: 50px; width: 50px; color:white;">
<img src="ouch" alt="here i am"/>
<div>

В приведенном выше примере текст alt будет черным. Однако с цветом: белый текст alt белый.

Ответ 4

В Firefox и Chrome (и, возможно, больше) мы можем вставить строку '(....) в текст alt изображения, которое не загружено.

img {
  font-style: italic;
  color: #c00;
}

img:after {
  content: " (Image - Right click to reload if not loaded)";
}

img::after {
  content: " (Image - Right click to reload if not loaded)";
}

<img alt="Alt text - " />

Ответ 5

так как этот вопрос является первым результатом в поисковых системах

Есть проблема с выбранным -and right путем way-solution, заключается в том, что если вы хотите добавить стиль, который будет применяться к изображениям, например (например, к границам).

например:

img {
  color:#fff;
  border: 1px solid black;
  padding: 5px;
  background-color: #ccc;
}

<img src="http://badsrc.com/blah" alt="BLAH BLAH BLAH" /> <hr />
<img src="https://cdn4.iconfinder.com/data/icons/miu-square-flat-social/60/stackoverflow-square-social-media-128.png" alt="BLAH BLAH BLAH" />

Ответ 6

Вы можете использовать img[alt] {styles} для стилизации только альтернативного текста.