VPF::Вывод картинки из СSS - Форум программистов

nikeyb

Дата 22.4.2014, 14:42 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 4.12.2012

Репутация: нет
Всего: нет

Подскажите, как правильно так сделать, чтоб картинку не в сss прописывать, а в html страничку (прописать ссылку картинки). Это для того, чтоб можно на разных страницах html можно было изменить изображение.

Код


        <div class="main-banner-smalli">
        
                <div class="inners">
                    <h1>Текст 1</h1>
                
                </div>
            
            <div class="innersi">
                        <h4>Текст 2</h4>
                </div>
            </div>

Код




.main-banner-smalli {background:url(http://www.wm-banner.ru/img/WM-BANNER.jpg) no-repeat left top;width:920px;height:163px;margin-bottom:20px}
.main-banner-smalli .inners {padding:33px 0 0 52px }
.main-banner-smalli .innersi { background: url() repeat-y #fc-0; padding:3px 0 0 52px }
.main-banner-smalli h1 {font-size:22px;width:690px}

Это сообщение отредактировал(а) nikeyb - 22.4.2014, 14:44

DeadButHappy

Дата 4.5.2014, 09:23 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 20
Регистрация: 9.8.2010
Где: Russia

Репутация: нет
Всего: нет

Код


<div class="main-banner-smalli">
    <div class="img_div_pos_absolute">
        <img src="http://www.wm-banner.ru/img/WM-BANNER.jpg" />
    </div>
    <div class="inners">
         <h1>Текст 1</h1>

    </div>
    <div class="innersi">
         <h4>Текст 2</h4>

    </div>
</div>

Код


.main-banner-smalli {
    position: relateve;
    width:920px;
    height:163px;
    margin-bottom:20px
}
.img_div_pos_absolute {
    position: absolute;
    width:920px;
    height:163px;
    overflow: hidden;
}
img {
    display: block;    
}
.main-banner-smalli .inners {
    position: relative;
    padding:33px 0 0 52px
}
.main-banner-smalli .innersi {
    position: relative;
    background: url() repeat-y #fc-0;
    padding:3px 0 0 52px
}
.main-banner-smalli h1 {
    font-size:22px;
    width:690px
}

а вот демка http://jsfiddle.net/8er2y/1/

Aliance

Дата 5.5.2014, 10:43 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

Правильнее все же прописывать background-image в css, и менять его в html через изменение классов.

То есть у элемента будет 2 класса - основной со всеми стилями картинки, но без ее адреса и второй (который и меняется) только с указанием background-image

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

DeadButHappy

Дата 5.5.2014, 14:34 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 20
Регистрация: 9.8.2010
Где: Russia

Репутация: нет
Всего: нет

Цитата(Aliance @ 5.5.2014, 10:43)

Правильнее все же прописывать background-image в css, и менять его в html через изменение классов.

А чем это правильнее?
Изображения, в том числе и баннеры логичнее делать через изображения.
Через фон логично делать только оформление, фоновые изображения которых не несут смысла.
Кроме того в img можно и title задать.
Если нужно менять, то можно менять атрибут src у img.

Aliance

Дата 5.5.2014, 14:50 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

В тексте задаче не сказано, что это баннеры. Сказано изображения, я принял это за нечто подобное логотипу. Для баннеров логичнее через html тег, да.
В общем в данном топике предложено 2 варианта - каждый правильный для своей ситуации, автор сам выберет более подходящий ему, в зависимости от его контекста =)

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »