语法帮助 - 背景图片精灵的CSS

我知道我接近，但有人帮我出：语法帮助 - 背景图片精灵的CSS

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

的图像被用作一个精灵，“background.jpg”是1720px宽1100px高。我需要在第一个实例中显示图像的右上部分，在第二个实例中显示图像的左下部分。在每种情况下，需要从jpg中获取的矩形的大小是600px宽和400px高。

来源

2012-04-28 Doug Fir

这看起来像一个可疑的http://stackoverflow.com/questions/10364643/css-two-background-images-using-a-sprite转发与图像文件名称换出了别的完全不同的背景位置。 – BoltClock 2012-04-28 15:43:48

虽然这与这篇文章有关，但它是关于选择图像的所需坐标所需的特定语法的一个新问题 – 2012-04-28 15:45:39

这可能有助于

body { 
    background-attachment: fixed; 
    background: url("images/background.jpg") 100% 0px no-repeat, url("images/background.jpg") 0% 600px no-repeat; 
    line-height: 1; 
    min-width: 1150px; 
    }

发挥一下与图像后的值。 100％和0％指的是x轴（这些也可以是px），而0px 600px指的是y轴。没有一个活页面来玩这个，就像我可以告诉你的一样。

来源

2012-04-28 16:21:03 frontendzzzguy

好吧我正在陷入困惑。 url之后的坐标是否与要选择的图像的哪一部分相关或放置在图像的选定部分的哪个位置？我在如何为图像的每个部分放置左上角和右下角以及在何处选择图像之间混淆不清。为了简单起见，我说每边都有一个1000px的正方形，我希望从精灵的左下角选择一个大小为100px的正方形，并将其放置在浏览器的右上角。怎么样？希望我有道理！ – 2012-04-28 16:44:57

要做到这一点，你会有以下背景：url（“images/background.jpg”）900px -900px不重复。坐标与图像的位置有关。所以这是从左边900px和从顶部-900px。那有意义吗？ – frontendzzzguy 2012-04-28 16:58:57

此外，坐标是相对于父容器。 – frontendzzzguy 2012-04-28 17:04:30

语法帮助 - 背景图片精灵的CSS

回答

相关问题