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

解决此问题的最佳方法是使用photoshop ..

从单张图片中删除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:" ";
    }

在精灵图像之间添加间隙

3 个答案: