Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Вывод картинки из СSS

Автор: nikeyb 22.4.2014, 14:42

Подскажите, как правильно так сделать, чтоб картинку не в с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}

Автор: DeadButHappy 4.5.2014, 09:23

Код


<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

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

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

Автор: DeadButHappy 5.5.2014, 14:34

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

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

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

Автор: Aliance 5.5.2014, 14:50

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