如何使网站上

我试图使像http://www.rottentomatoes.com/ 背景图片的工作，我看了一下他们所使用的CSS这也是本作的背景图像的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

加烂番茄图像来解释我的意思在背景图像静态文本。

来源

2012-10-06 NoviceMe

背景图像的作品，因为它有一个梯度的边界，让你看不到的地方的形象结束，'背景color'开始。另外，请提供截图。 – Zeta

@ Zeta-添加了屏幕截图。我如何添加渐变？我仍然不明白你的意思是不能看到图像的开始和结束位置？但是，他们的图像在所有浏览器中如何静态显示？文本在所有浏览器上的相同位置？ – NoviceMe

@NoviceMe ...我不确定你在说什么。在该网站的背景图片上没有任何文字：http://images.rottentomatoescdn.com/images/redesign/bg-clouds.png?v=20120910 – Mike

这是一个很好的开始，参考下面的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>

参考链接检查： - 从烂番茄Css Background In W3Schools

来源

2012-10-06 04:01:06

如何使网站上

回答

相关问题