1

我正在尝试使背景图像像http://www.rottentomatoes.com/一样工作， 我查看了他们使用的 css，它是这样的：

background:url(../Content/themes/base/images/background.jpg) no-repeat fixed 50% 0px rgb(0, 0, 0);

我用分辨率为 1280*1024 的背景图像进行了尝试，但它的工作方式完全不同。它不覆盖整个背景，在页面的左侧和右侧留下空间。对于所有主要浏览器（即 firefox 和 chrome）也有不同的工作方式。有没有办法为所有浏览器制作像 rottoentomatoes 一样的背景图像，它们的背景图像保持静态意味着如果在背景图像的左侧写了一些小文本，那么它在所有浏览器中都会相似？

截屏 这是黑色背景图像没有覆盖整个屏幕的截图。我还尝试了以下css：

background: url(../Content/themes/base/images/background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

这覆盖了整个屏幕，但在所有浏览器上并不一致，并破坏了图像的质量。一点也不像烂番茄。

烂

添加了 rottentomatoes 图像来解释我所说的背景图像中的静态文本的含义。

4

1 回答 1

0

这是一个很好的起点，参考下面的 URL。当您向下滚动时访问网页时，它们会经历对齐背景的所有方面。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body
            {
                margin-left:200px;
                :#5d9ab2 url('img_tree.png') no-repeat top left;
            }

            .container
            {
                text-align:center;
            }

            .center_div
            {
                border:1px solid gray;
                margin-left:auto;
                margin-right:auto;
                width:90%;
                background-color:#d0f0f6;
                text-align:left;
                padding:8px;
            }
        </style>
    </head>

    <body>
        <h1> </h1>
    </body>
</html>

请参阅链接检查：- W3Schools 中的 Css 背景

于 2012-10-06T04:01:06.863 回答