как размножить картинку спрайт?

(Ответов: 11, Просмотров: 1944)
Страница 1 из 2 12 Последняя
  1. Опытный Аватар для Fktrctq
    • Регистрация: 21.12.2011
    • Сообщений: 457
    • Репутация: 11
    Подскажите пожалуйста как размножить картинку из спрайта по горизонтали
    делаю следующим образом
    Код HTML:
    <div class="logo"> <div class="log">
        ::before
         <span>заголовок</span>
        ::after
     </div> </div>
    PHP код:
    .logo {
        
    widthauto;
        
    height90px
        
    }
    .
    log{
          
    position:absolute;
       }
    .
    log:before{
       
    z-index:99;
       
    content:"";
       
    position:absolute;
       
    background:url('image/pc.png'repeat--152px 0;
       
    width:1px
       
    height:90px
       
    }
    .
    log:after {
        
    width70px;
        
    height90px;
        
    right: -70px;
        }
    .
    log:after {
        
    floatleft;
        
    z-index99;
        
    content"";
        
    positionabsolute;
        
    backgroundurl('image/pc.png')no-repeat -146px 0;
        } 
    Но картинка в before появляется только один раз и не размножается по <div class=log> Подскажите что делаю не так?
    Последний раз редактировалось Fktrctq; 26.07.2016 в 10:46.
    • 0
  2. You shall not pass. Ага. Аватар для Гендальф Серый
    • Регистрация: 02.02.2013
    • Сообщений: 1,184
    • Репутация: 1512
    • Webmoney BL: ?
    Точно так же
    • 1

    Спасибо сказали:

    Gann(26.07.2016), NukeKuper(27.07.2016),
  3. Super Moderator Аватар для oleg_ug
    • Регистрация: 31.12.2010
    • Сообщений: 4,403
    • Репутация: 1968
    • Webmoney BL: ?
    Гендальф Серый, уже удалил дубли
    • 0
  4. Новичок
    • Регистрация: 20.07.2016
    • Сообщений: 25
    • Репутация: 6
    • Webmoney BL: ?
    Fktrctq, у .log:before ширина в один пиксель задана.

    Миниатюры 2016-07-26_10-09-45.gif  
    Последний раз редактировалось samoylov; 26.07.2016 в 12:18.
    • 0
  5. Опытный Аватар для Fktrctq
    • Регистрация: 21.12.2011
    • Сообщений: 457
    • Репутация: 11
    samoylov,Все правильно 1px а как по другому я задам размер картинки которую нужно вырезать из спрайта?
    • 0
  6. Новичок
    • Регистрация: 20.07.2016
    • Сообщений: 25
    • Репутация: 6
    • Webmoney BL: ?
    Fktrctq, нет. Этим Вы задаете ширину блока, внутри которого собираетесь делать повторение по горизонтали. То есть по сути у вас картинка размножается, на на протяжении блока в один пиксель.

    Для спрайтов есть правило - если элемент требуется повторять по горизонтали, все элементы в спрайте должны быть выстроены вертикально. И наоборот. Поэтому скорее всего нужно переделать сам спрайт.
    • 1

    Спасибо сказали:

    Fktrctq(26.07.2016),
  7. Опытный Аватар для Fktrctq
    • Регистрация: 21.12.2011
    • Сообщений: 457
    • Репутация: 11
    samoylov,а не подскажите можно ли масштабировать картинку из спрайта под разные разрешения например логотип?
    в спрайте он имеет размер 145 на 145 пикселей его делаю под ПК как бы его сделать под планшет уменьшив до размера 120 на 120 Реально ли такое сделать используя спрайт?
    • 0
  8. Новичок
    • Регистрация: 20.07.2016
    • Сообщений: 25
    • Репутация: 6
    • Webmoney BL: ?
    Fktrctq, посмотреть бы на спрайт (можно заблюрить айдентику, главное - расположение элементов). А так, масштабировать можно, используя background-sizе. Например, установим ширину изображения в 120px, а высота будет уменьшена пропорционально:

    PHP код:
    @media (max-width767px) {
      .
    log:before{
        
    background-size:120px auto;
      }

    Но я бы посоветовал для мобильных платформ вовсе делать retina-ready изображения, чтобы не было мыла. Если хотите, чтобы все было в одном спрайте для всех разрешений, то можете увеличить его до 240px по ширине. И также для десктопа уменьшить с помощью background-size до 145px, а на девайсах до 120px.
    Последний раз редактировалось samoylov; 26.07.2016 в 15:39.
    • 1

    Спасибо сказали:

    Fktrctq(26.07.2016),
  9. Опытный Аватар для Fktrctq
    • Регистрация: 21.12.2011
    • Сообщений: 457
    • Репутация: 11
    samoylov,
    попробовал

    PHP код:
    @media screen and (max-width599px)
    .
    head:before {
        
    background-size120px auto;
        }
    .
    head:before {
        
    z-index99;
        
    content"";
        
    positionabsolute;
        
    backgroundurl('image/pc.png')no-repeat 0 0;
        
    width145px;
        
    height145px;

    при разрешении 599 выводится весь спрайт в размер 120 на 120 а он у меня размером 184 на 180
    Подскажите пожалуйста как можно подправить чтобы из спрайта было видно только 120 на 120 от 0 точки
    • 0
  10. Новичок
    • Регистрация: 20.07.2016
    • Сообщений: 25
    • Репутация: 6
    • Webmoney BL: ?
    Fktrctq, посмотрел спрайт. Теперь стало все понятно. Изображение имеет размеры 184х180:




    Но! Справа от логотипа располагается ряд дополнительных элементов, и если уменьшить до 120px весь спрайт, то и они влезут в блок. Соответственно нужно уменьшить изображение с тем же коэффициентом, какой предусмотрен для самого логотипа.


    Производим расчеты:

    145 / 120 = 1.2083 - коэффициент уменьшения логотипа
    184 / 1.2083 = 152.2 - размер всего спрайта при уменьшенном логотипе


    Итоговый код:

    PHP код:
    .head:before {
      
    z-index99;
      
    content"";
      
    positionabsolute;
      
    backgroundurl('http://i.imgur.com/DCuhFym.png')no-repeat 0 0;
      
    width145px;
      
    height145px;


    @
    media screen and (max-width599px) {
      .
    head:before {
          
    background-size152.5px auto;
          
    width120px;
          
    height120px;
      }

    Ширину взял чуть больше, потому что нижние элементы таки залезали вместе с логотипом. Для избежания такого можно поиграться с размерами или предусмотреть поля.


    Рабочий пример
    http://jsbin.com/zikicanaxi/edit?html,css,output
    • 1

    Спасибо сказали:

    Fktrctq(27.07.2016),
Страница 1 из 2 12 Последняя

Похожие темы

Темы Раздел Ответов Последний пост
Размножить тексты для объектов по недвижимости
Вопросы от новичков 2 04.06.2014 16:32
Картинку в рубрику
WordPress 12 25.02.2014 20:16
написать и размножить статью
Копирайтинг, переводы, постинг 0 21.10.2013 08:20
размножить статью
Копирайтинг, переводы, постинг 3 14.08.2012 12:52

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры