Добавление пробелов между ними спрайт изображения

Question

У меня есть этот образ: http://fs5.directupload.net/images/160602/xfrddbfa.png

, и я хотел бы, чтобы добавить его в свой веб-сайт. Но я также хотел бы добавить небольшой промежуток между каждым флагом.

Это возможно? Вот HTML, где я хотел бы, чтобы поместить его в качестве псевдо-элемента до класса «заголовок»:

<div class="bottom_dual"> 
    <a title="title" href="#"> 
     <span class="headline">Lorem ipsum</span> 
    </a> 
    <span class="caption">Lorem ipsum.</span> 
    <span class="more"> 
     <a class="teaser_link" href="#">more</a> 
    </span> 
</div> 

Спасибо за вашу помощь!

Answer 1

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

Кроме того, я не уверен, что вы используете псевдоэлемент правильно.

Поместите ярлык изображения 5 раз - по 1 для каждого флага.

<img id="flag1" src="example.com" /> 
<img id="flag2" src="example.com" /> 
<img id="flag3" src="example.com" /> 
<img id="flag4" src="example.com" /> 
<img id="flag5" src="example.com" /> 

Используйте CSS для каждого изображения для каждого флага.

#flag1{ 
    position: absolute; 
    clip:(rect, 0px, 30px, 20px, 0px); // Position of the flag 
} 
etc.. 

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

Answer 2

Лучший способ для решения этой проблемы является использование фотошопом ..

Сократите свои 5 флагов из этого одного изображения

Затем переместите их (пространство их) ...

Ссылки которые Вы можете найти на сайте:

https://www.youtube.com/watch?v=6aMbMk9IGoM

https://www.youtube.com/watch?v=VTHudF4fo2I

Вышеуказанные ссылки объяснить вам о том, как вырезать (растениеводство) изображение и переместить их ..

Надеется, что это помогает ..

Answer 3

использовать этот стиль:

.headline:before{ 
     padding-left:30px; 
     background:url(http://fs5.directupload.net/images/160602/xfrddbfa.png) no-repeat -66px 0px;    
     content:" "; 
    }