在精灵图像之间添加间隙答案

【问题标题】：Adding gaps in between sprite image在精灵图像之间添加间隙
【发布时间】：2016-06-02 14:30:54
【问题描述】：

我有这张图片：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>

感谢您的帮助！

【问题讨论】：

正确答案是使用Photoshop编辑图像。分割成5张图片，然后用css控制间距。

标签： html css sprite

【解决方案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..

我讨厌自己给出这样的答案。说真的，只需编辑图像。

【讨论】：

我使用了单个跨度元素，并为它们提供了不同的背景位置和边距。这工作得很好。无论如何，谢谢！

【解决方案2】：

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

从一张图片中去掉你的 5 个标志

然后移动它们（间隔它们）...

您可以参考的链接：

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

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

以上链接向您解释了如何剪切（裁剪）图像并移动它们..

希望对你有所帮助..

【讨论】：

我使用了带有背景位置的单个元素。无论如何，谢谢！

【解决方案3】：

使用这种风格：

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

【讨论】：