<body>以外的背景图像？

我试图定位一个背景图像，以便它与现有的渐变背景对齐，该渐变背景相对定位到<html>元素（即渐变图像出现在浏览器宽度的92％处，不管您如何调整大小窗口）。<body>以外的背景图像？

我通过将图像放置在<div>中，将图像相对于<div>定位，并将<div>相对于浏览器窗口定位。

例如。

<body> 
    <div id="background-position-container"> 
    <img src="images/bubbles.png" id="background-corner-decoration" /> 
    </div> 
</body>

有：

<style> 
#background-position-container { 
    position: absolute; 
    width: 0px; 
    height: 0px; 
    top: 180px; 
    left: 92%; 
} 

#background-corner-decoration { 
    position: relative; 
    /* tweak the position of the image so it lines up with the gradient */ 
    top: -176px; 
    left: -118px; 
    width: 216px; 
    height: 477px; 
    margin: 0px -118px -176px 0px; 
} 
</style>

这似乎很好地工作，但如果你水平缩小浏览器窗口，背景图像会导致<body>元素增长超过<html>元素和滚动条出现。

我似乎能够通过创建<body>一个新的同级元素，并把里面的<div>解决这个问题：

<div id="background-page-container"> 
    <div id="background-position-container"> 
    <img src="images/bubbles.png" id="background-corner-decoration" /> 
    </div> 
</div> 
<body> 
</body>

，并补充说：

#background-page-container { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
}

这至少在Firefox ，但这看起来并不是一个好的做法，我确信所有的浏览器都不能正确呈现。有没有更好的方法来实现我想要的，同时将所有显示元素都留在<body>之内（也就是说，将背景图像剪切在<body>的边缘而不是增长）？

感谢您的帮助，
gs。

编辑：按照要求，这里有jsfiddles来说明这个问题：

这里是它看起来像Hiigaran的解决方案：http://jsfiddle.net/kn36A/
这里是对齐正确的解决方案，但会导致难看的滚动条时，窗口的尺寸重新调整：http://jsfiddle.net/w446Q/
这里是“最好”的解决方案，我到目前为止，但它似乎违反HTML最佳实践（？）：http://jsfiddle.net/H2PLr/

我已经用＃3测试过的每个浏览器似乎都能够正确渲染它 - 这种解决方案真的和我认为的一样糟糕吗？

再次感谢！
gs。

来源

2014-04-01 Guy Smiley

在其他答案的评论中，Hiigaran通过简单地从解决方案＃3开始，并在<主体>下移动外部包含div（称为“background-page-container”）来解决该问题。所以没有必要像我以前想象的那样在<主体>之外出现元素。

gs。

来源

2014-04-04 13:08:11

假设我正确读取...

您可以用逗号分隔结合背景CSS。因此，举例来说，如果你想有一个图像和渐变作为背景一样的东西，尝试：

background-image: url('image.png'), linear-gradient(#bb0000, #0000bb);

然后，您可以以同样的方式添加像background-position其他背景的CSS属性：

background-position:50px 50px, 0;

值的顺序很重要。第一组值（50px 50px）适用于图像，但不适用于渐变。第二个background-position值（0）适用于第二个background-image值，即为梯度。

在你的HTML中使用它，你应该能够以绝对值或相对值定位你的图像。

编辑：此外，如果您添加任何额外的背景属性没有逗号，那么您提供的值将适用于所有背景。例如，background-repeat:no-repeat将不会重复图像或渐变，但background-repeat:no-repeat,repeat将以与位置值相同的方式应用于每个图像或渐变。

来源

2014-04-01 22:24:47 Hiigaran

嗨，谢谢你的回答。这种情况下的问题是，渐变的位置相对于浏览器宽度的92％。如果我将图像定位为92％的背景，则不会与渐变正确对齐。即使我调整了图像的位置，使其排列齐整，但您只需调整浏览器窗口的大小，图像就不再与渐变线对齐。所以我需要一种方法来定位图像，使其不会相对于渐变的位置移动。 –

你能链接你试过的代码的JSFiddle吗？ http://jsfiddle.net/ – Hiigaran

请参阅原文中的编辑。顺便说一句，我错了背景图像相对于梯度移动，如果他们被设置为相同的％位置，但是如果您尝试通过将两个元素放置在不同的％位置来排列它们（例如92％为梯度但93.45 ％图像）。 –

<body>以外的背景图像？

回答

相关问题