CSS两个背景图片使用精灵 [英] CSS two background images using a sprite

问题描述

我目前使用两个背景图片，如下所示：

  body {
 background-attachment：fixed; 
 background-image：url（images / bktopright.png），url（images / bkbottomleft.png）; 
 background-position：right top，left bottom; 
 background-repeat：no-repeat; 
 line-height：1; 
 min-width：1150px; 
} 
  

$ b $ p

为了提高网页加载时间，我现在想使用一个图片，精灵。我认为这是唯一的，因为我想在背景上使用相同的图像两次，其中我显示在右上角的图像的一部分和浏览器窗口左下角的图像的一部分。

如果新图片的宽度为1720像素，高度为1100像素，并称为background.jpg，则图像的两个部分都是600像素宽，

解决方案

这里是一个工作示例的答案。

http://jsfiddle.net/ctLZY/

 < div class =bgid =bg1>< / div> 
< div class =bgid =bg2>< / div> 
  

$ b b

CSS

  .bg {
 background-image：url（someimage.png）; 
 background-repeat：no-repeat; 
 position：fixed; 
 width：100px; 
 height：100px; 
} 
＃bg1 {
 background-position：-50px 0px; 
 right：0px; top：0px; 
} 
＃bg2 {
 background-position：50px 0px; 
 left：0px; bottom：0px; 
} 
  

您可以参考以下链接获取更多信息。

Css3.info

Css-Tricks

这是我遇到的方法。
可能有更好的方法来处理这个。

I'm new to sprites and this particular task is boggling me - please help someone.

I currently use two background images like so:

body {
background-attachment: fixed;
background-image: url("images/bktopright.png"), url("images/bkbottomleft.png");
background-position: right top, left bottom;
background-repeat: no-repeat;
line-height: 1;
min-width: 1150px;
}

In order to improve page load time I'd now like to use one image, a sprite. I think this is unique in that I'd like to use the same image twice on the background, where I show one part of the image in the top right and one part of the image in the bottom left of the browser window. Both parts of the image I'd like to show are 600px wide by 400px tall.

If the new image is 1720px wide by 1100px tall and called "background.jpg" how would I adjust the code to achieve this?

解决方案

Here's the answer for you with a working example.

http://jsfiddle.net/ctLZY/

 <div class="bg" id="bg1"></div>
 <div class="bg" id="bg2"></div>​

CSS

.bg{
    background-image: url("someimage.png");
    background-repeat: no-repeat;
    position:fixed;
    width:100px;
    height:100px;
}
#bg1{
    background-position: -50px 0px;
    right:0px; top:0px;
}
#bg2{
    background-position: 50px 0px;
    left:0px; bottom:0px;
}​

You can refer the below links for more info.
Css3.info
Css-Tricks
This is the method that I came across. There might be better methods to handle this.

这篇关于CSS两个背景图片使用精灵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！