Question

我正在尝试使背景图像像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这样的背景图像，它们的背景图像保持静态意味着如果在背景图像的左侧写入一些小文本，它在所有浏览器中都会相似？

screenshot 这是截图，看黑色背景图像不覆盖整个屏幕。我也尝试过跟随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。

rotten

添加rottentomatoes图像以解释背景图像中静态文本的含义。

Answer 1

这是一个很好的起点，请参阅下面的网址。当您向下滚动浏览网页时，它们会查看对齐背景的所有方面。

<!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>

参考链接检查： - Css Background In W3Schools

如何使css在网站上为背景图像工作

1 个答案: