CSS两个背景图像使用精灵

我是新来的精灵，这个特殊的任务是让我惊叹 - 请帮助别人。CSS两个背景图像使用精灵

我目前使用两个背景图像像这样：

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; 
}

为了提高页面加载时间我现在想用一个形象，一个精灵。我认为这是独一无二的，因为我希望在背景上使用相同的图像两次，其中我在浏览器窗口的右上角显示图像的一部分，并在左下角显示图像的一部分。我想要展示的图像的两个部分都是600px宽×400px高。

如果新图片宽1700px，高1100px并称为“background.jpg”，我将如何调整代码以实现此目的？

来源

2012-04-28 Doug Fir

Duplicate post： - http://www.stackoverflow.com/questions/7653240/multiple-background-images-using-css3-and-sprites – rgvcorley 2012-04-28 14:59:50

你发现我的下面的答案有用吗？没有反应？ – Katti 2012-05-24 21:50:00

你可以，取而代之，创建内：
不是因为只有简单的CSS，但它可以让你使用你的精灵。

的HTML：

<body> 
    <div id="bgOne"></div> 
    <div id="bgTwo"></div> 
</body>

的CSS：

body { 
    min-width: 1150px; 
} 

#bgOne, #bgTwo { 
    position: fixed; 
    height: 400px; 
    width: 600px; 
} 

#bgOne { 
    background: url('images/bktopright.png') no-repeat right top; 
    right: 0; 
    top: 0; 
} 

#bgTwo { 
    background: url('images/bkbottomleft.png') no-repeat left bottom; 
    left: 0; 
    bottom: 0; 
}

来源

2012-05-23 22:26:44

下面是从一个工作示例答案给你。

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; 
}

您可以参考获取更多信息下面的链接。
Css3.info
Css-Tricks
这是我碰到的方法。可能有更好的方法来处理这个问题。

来源

2012-05-24 16:24:14 Katti

CSS两个背景图像使用精灵

回答

相关问题