Question

我必须遗漏一些简单的...我正在尝试创建一个将图像设置为背景的html页面。现在我希望图像占据页面的70％，与右上角对齐。

我能够将图像对齐到页面的右上角，它在chrome中看起来相当不错，但在IE中却很糟糕。在IE中，图像占据了整个页面 - 这有效地破坏了页面的外观和感觉......

有什么我想念的吗？如何限制IE中背景图像的大小？有什么想法吗？代码如下：

<html>
<head>
<style type="text/css">
    body {
        margin: 0;
        background: transparent url(Background2.png) no-repeat fixed right;
        background-position: right top; 
        font-size:12px;
    }
</style>
</head>
<body>
    Hello!
</body>

Answer 1

这是一项CSS3功能，仅在最新的浏览器中受支持。 Mozilla在Firefox 3.6中引入了这个功能，当Webkit / Chrome做的时候我不会起诉。

-moz-background-size: 300px;
-webkit-background-size: 300px;
background-size: 300px;

您可以找到Mozilla文档here。

Answer 2

宽度CSS3您可以执行以下操作：

body {
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}

其他你应该使用一些技巧，如here所述。最好的方法是：

#img.source-image {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

另一个假解决方案是here。

CSS问题：如何设置背景图像的宽度？

2 个答案: