Как добавить встроенный CSS-код с фоновым изображением в HTML-код страницы?

Question

Как добавить встроенный CSS-код с фоновым изображением в HTML-код страницы?

19 мар. 2012 г., 17:35:52

Просмотры: 62.5K

Голосов: 0

Я хочу добавить встроенный CSS-код внутри страницы моего блога. Этот CSS-код использует изображение в качестве фона для div элемента.

Это возможно? И как это сделать?

Я попробовал добавить изображение как медиа-ресурс и получил URL для него, но использование этого URL не работает.

Пример кода, который я вставляю в HTML страницы:

    <p><a href="http://mysite.com/wp-signup.php" style="width: 90%;
        font-family: Helvetica, Arial, sans-serif;
        background: #0e710d url(http://mysite.com/wp-content/uploads/2012/03/image.png) 0 0 repeat-x;
       font-size: 1.6em;
    ">
    Нажмите здесь &raquo;</a></p>

Timothée HENRY

181

css

Комментарии

Я понял, что проблема была в пробеле в середине моего встроенного CSS-кода, из-за чего код не работал.

Timothée HENRY

20 мар. 2012 г. 12:14:11

Все ответы на вопрос

Комментарии

Я понял, что проблема была в том, что у меня был пробел в середине inline CSS кода, что мешало его работе.

Timothée HENRY

20 мар. 2012 г. 12:14:27

Рад, что вы решили эту проблему. Такие вещи могут сводить дизайнера с ума во время поиска решения ;)

Sagive

20 мар. 2012 г. 14:52:33

Используя прямой путь к файлу, вы рискуете получить битую ссылку на изображение в будущем. Лучше использовать функцию wp_get_attachment_image_src().

JPollock

21 июн. 2013 г. 00:50:12

Нет причин, по которым этот метод не должен работать в целом, хотя ваш конкретный пример кода не будет работать так, как вы хотите: вы добавляете атрибут style к тегу A, а не к тегу DIV, что, как вы говорите, вам нужно. Таким образом, тег A должен быть стилизован, как показано, а не тег DIV.

Adam Rice

291

19 мар. 2012 г. 18:10:04

Sagive 2.78K · Accepted Answer · 2012-03-19T18:00:16Z

Нельзя просто добавить класс к этой ссылке? Зачем трогать файлы шаблонов?..
В любом случае, я не вижу причин, почему это нельзя сделать... CSS должен работать..

Единственное изменение, которое я бы сделал при редактировании файла шаблона —
использовал бы PHP для получения URL папки (где находится изображение), вот так:

<style type="text/css">
.specialLink a {
    width: 90%;
    font-family: Helvetica, Arial, sans-serif;
    background: #0e710d url("<?php get_bloginfo('url'); ?>/wp-content/uploads/2012/03/image.png") repeat-x 0 0;
    font-size: 1.6em;
}
</style>

<p class="specialLink"><a href="http://mysite.com/wp-signup.php">Кликните здесь &raquo;</a></p>

Еще раз... я рекомендую использовать style.css для загрузки этого CSS, а не в
файлах шаблонов.. Если это нужно только для конкретной страницы, скажите... у меня есть
лучшее решение для этого.

Надеюсь, это поможет, Sagive.