html – 如何使用CSS sprite重复背景图像？

发布时间：2020-12-14 18:48:37 所属栏目：资源来源：网络整理

导读：这是我过去遇到麻烦的一件事,在我心中,所以我做了一个简单的例子,精灵图片来测试,并希望得到一些答案. 如果您在这里查看我的代码和演示 http://dabblet.com/gist/2263037 你会看到我有一个使用背景图像的简单div 在DIV下面我有相同的div,但是这次我尝试使用C

这是我过去遇到麻烦的一件事,在我心中,所以我做了一个简单的例子,精灵图片来测试,并希望得到一些答案.

如果您在这里查看我的代码和演示
http://dabblet.com/gist/2263037

你会看到我有一个使用背景图像的简单div

在DIV下面我有相同的div,但是这次我尝试使用CSS Sprite图像

所以我的问题是,可以使用这个精灵图像复制第一个DIV的外观,还是精灵图像上需要的更改？

没有雪碧图像

/* Notice wrapper with Single Image */
.notice-wrap {
    margin-top: 10px; padding: 0 .7em;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #CD0A0A;
    background: #B81900 url(http://www.getklok.com/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;
}

与雪碧图像

/* Notice wrapper with SPRITE Image */
.notice-wrap-sprite {
    margin-top: 10px; padding: 0 .7em;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #CD0A0A;
    background: #fff url(http://f.cl.ly/items/2P1u2S1a132R0B3d2s08/test-sprite.png) repeat;
    background-position: 0 -52px;
}

HTML

<div class="notice-wrap"> 
       <p><strong>NOTICE:</strong> This is just a test notice,no reason to be alarmed</p> 
</div>

<BR><BR><BR>

<div class="notice-wrap-sprite"> 
       <p><strong>NOTICE:</strong> This is just a test notice,no reason to be alarmed</p> 
</div>

解决方法

设置精灵

你可以使用图像精灵来做你想要的.它们只能沿着一个轴重复,即repeat-x,但在你的情况下,这就是你所需要的.此外,您的精灵中的图像必须运行整个宽度,这是浏览器知道如何平铺它.

诀窍是您的重复背景必须延伸到您的精灵图像的全部宽度上.这是至关重要的.这是你的形象,修改为符合这个标准：

设置CSS

现在我们只是像往常一样参考,它可以正常工作：

/* Notice wrapper with SPRITE Image */
.notice-wrap-sprite {
  margin-top: 10px; padding: 0 .7em;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #CD0A0A;
  background: #fff url(http://f.cl.ly/items/2P1u2S1a132R0B3d2s08/test-sprite3.png) repeat-x;
  background-position: 0 -52px;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!