在精灵图像之间添加间隙

Question

我有这张图片：http://fs5.directupload.net/images/160602/xfrddbfa.png

我想将它添加到我的网站中。但是，我还想在每个标志之间添加一个小间隙。

这有可能吗？这是 HTML 我想将它作为伪元素放在 class "headline":

之前

<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

解决这个问题最好的方法就是使用photoshop..

从一张图片中剪下 5 个旗帜

然后移动它们（space 它们）...

您可以参考的链接：

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:" ";
    }

在精灵图像之间添加间隙

Adding gaps in between sprite image

html

css

sprite