Блог

Главная - Вопросы по программированию - Есть ли правильный способ использовать изображение base64 data-URI из таблицы стилей CSS?

Есть ли правильный способ использовать изображение base64 data-URI из таблицы стилей CSS?

#css #background #base64

#css #справочная информация #base64

Вопрос:

Я создаю таблицу, содержащую изображения, и хочу ссылаться на src изображения как на URI данных base64 из таблицы стилей. Эта таблица стилей будет содержать множество закодированных изображений. Я мог бы сделать это в теле страницы или в заголовке, но это затрудняет редактирование документа. Как я должен кодировать тег изображения в теле и таблице для ссылки из внешнего CSS?

Я попытался использовать изображение в качестве URI данных base64 в теле. 

 <img alt="B" src="data:image/png;base64,iVBORw0KG..." align="bottom" border="0" height="186" width="120">

Это работает. Также в заголовке в качестве стиля.

Я просмотрел stackoverflow и другие места и нашел похожий код, но не с внешним файлом CSS.

 <!-- within the page body -->
<td style="vertical-align: top; height: 186px; width: 120px;">
    <div class="parent">
        <div class="child"><img src="C" align="bottom" border="0" height="186" width="120"> </div>
    </div>
</td>

Вот JSfiddle
https://jsfiddle.net/mL5fkung /

Как вы можете видеть в 1-й строке, изображения отображаются традиционным способом. Во 2-й строке я использую код изображения base64 в коде img. В 3-й строке показан желаемый код, который не работает.

Комментарии:

1. Спасибо за вашу помощь и комментарии. Я могу использовать это для добавления нескольких ячеек td с уникальными изображениями данных uri.

Ответ №1:

Ваше решение будет работать, если вы добавите класс C к каждому <img> :

 <img src="" align="bottom" border="0" height="186" width="120" class="C" />

JSfiddle:https://jsfiddle.net/a40qnzuf /

Комментарии:

1. Использование этого метода может привести к появлению значка «поврежденное изображение» поверх фона. Вы могли бы использовать небольшое прозрачное изображение (1×1) в качестве исходного источника, чтобы избежать этого.

2. Я пытался <td> <div class="parent"> <div class="child"><img src="http://www.1x1px.me/ffffff-0.0.png" align="bottom" border="0" height="186" width="120" class="C" /> </div> </div> </td> , но изображение не масштабируется до 120×186

3. путем добавления background-size: contain; в . C в css я получаю сдерживание.