【问题标题】: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:" ";
    }

【讨论】:

    猜你喜欢
    • 2018-03-29
    • 1970-01-01
    • 2014-01-20
    • 1970-01-01
    • 1970-01-01
    • 2018-02-16
    • 2015-08-09
    • 1970-01-01
    • 2019-09-22
    相关资源
    最近更新 更多