当前位置： 文江博客话题详情

Blogger 在 Chrome 和 Safari 上遇到自定义背景图像问题

发布于 2024-08-24 14:42:07 字数 2443 浏览 5 评论 0原文

这很奇怪，有问题的网站是 blog.andrebatista.info 并且托管在 blogger.com 上。我试图使博客模板看起来与我的主网站 www.andrebatista.info。

由于某种原因，如果我直接访问博客地址，Chrome 和 Safari 无法显示我的所有背景图像......全部。

但是，如果我首先访问 www.andrebatista.info 然后再访问博客，它会渲染得很好吗？

我自定义它的方法是在博客模板的 head 标签的最末尾添加一个指向我的主网站样式表的链接。该样式表显示如下：

*{ 保证金：0； 填充：0； 边框：0； 关于

html,body {
 background:#064169 url(http://www.andrebatista.info/images/main_gradient_slice.jpg) repeat-x;
 font-family: Arial, "MS Trebuchet", sans-serif;
 font-size:18px;
}

#main_wrapper{
 margin: 0 auto;
 width:1024px;
}
 #header{
  background: url(http://www.andrebatista.info/images/header.jpg);
  height:133px;
  border:none;
  margin:0;
 }

 #menu_wrapper{
  background: url(http://www.andrebatista.info/images/menu.jpg);
  height:34px;
  overflow:hidden;

 }
  #menu_wrapper .menu_item{
   color:white;
   float: left;
   border: 1 px solid red;
   height: 34px;
   padding-top:10px; 
   text-align:center;
   width:100px;

  }

  #menu_wrapper .first{
   padding-left:240px;
   float:left;
   width:100px;

  }
  #menu_wrapper .active,#menu_wrapper .menu_item:hover{
   background-color:white;
   color:Teal;
   cursor: pointer;
  }

 #content_area_wrapper{
  background: url(http://www.andrebatista.info/images/body_bg_slice.jpg) repeat-y;
 }
  #content_area{
   min-height:524px;
   background: url(http://www.andrebatista.info/images/main_content_top.jpg) repeat-x;
  }
   #main_banner{
    background: url(http://www.andrebatista.info/images/main_banner.jpg) no-repeat center center;
    width:662px;
    height:338px;
    margin: 0 auto;

   }
   #main_banner div{
    color:white;
    padding-left:47px;
    padding-right:164px;
    padding-top:105px;
   }
   #text_area{
    overflow:hidden;
    width:662px;
    margin:0 auto;
    padding:14px;
   }
    #contentList{
     padding:0 20px 20px 20px;
    }
    #text_area .left{
     width:50%;
     float:left;
    }
    #text_area .left{
     width:50%;
     float:right;    
    }

 #footer2{
  background: url(http://www.andrebatista.info/images/footer.jpg);
  height:62px;
 }

 #footer{
  background: url(http://www.andrebatista.info/images/footer.jpg);
  height:62px;
 }

我可能会错过什么的任何想法？

原文

This is weird, the site in question is blog.andrebatista.info and it is a hosted at blogger.com. I'm trying to make the blogger template look the same as the one in my main website, www.andrebatista.info.

For some reason if I go directly to the blog address Chrome and Safari fail to display all of my background images... all of them.

However if I first go to www.andrebatista.info first and then go to the blog it renders just fine ?¿

The way I'm customizing it is by adding a link to my main site's stylesheet at the very end of the head tag on the blogger template. That stylesheet is displayed below:

*{
margin:0;
padding:0;
border:0;
}

html,body {
 background:#064169 url(http://www.andrebatista.info/images/main_gradient_slice.jpg) repeat-x;
 font-family: Arial, "MS Trebuchet", sans-serif;
 font-size:18px;
}

#main_wrapper{
 margin: 0 auto;
 width:1024px;
}
 #header{
  background: url(http://www.andrebatista.info/images/header.jpg);
  height:133px;
  border:none;
  margin:0;
 }

 #menu_wrapper{
  background: url(http://www.andrebatista.info/images/menu.jpg);
  height:34px;
  overflow:hidden;

 }
  #menu_wrapper .menu_item{
   color:white;
   float: left;
   border: 1 px solid red;
   height: 34px;
   padding-top:10px; 
   text-align:center;
   width:100px;

  }

  #menu_wrapper .first{
   padding-left:240px;
   float:left;
   width:100px;

  }
  #menu_wrapper .active,#menu_wrapper .menu_item:hover{
   background-color:white;
   color:Teal;
   cursor: pointer;
  }

 #content_area_wrapper{
  background: url(http://www.andrebatista.info/images/body_bg_slice.jpg) repeat-y;
 }
  #content_area{
   min-height:524px;
   background: url(http://www.andrebatista.info/images/main_content_top.jpg) repeat-x;
  }
   #main_banner{
    background: url(http://www.andrebatista.info/images/main_banner.jpg) no-repeat center center;
    width:662px;
    height:338px;
    margin: 0 auto;

   }
   #main_banner div{
    color:white;
    padding-left:47px;
    padding-right:164px;
    padding-top:105px;
   }
   #text_area{
    overflow:hidden;
    width:662px;
    margin:0 auto;
    padding:14px;
   }
    #contentList{
     padding:0 20px 20px 20px;
    }
    #text_area .left{
     width:50%;
     float:left;
    }
    #text_area .left{
     width:50%;
     float:right;    
    }

 #footer2{
  background: url(http://www.andrebatista.info/images/footer.jpg);
  height:62px;
 }

 #footer{
  background: url(http://www.andrebatista.info/images/footer.jpg);
  height:62px;
 }

Any ideas on what I could be missing?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

想挽留 2024-08-31 14:42:07

这不是 CSS 或您的博客所在的服务器的问题，而是您的网站所在的服务器的问题。当我使用 Fiddler 检查流量时，我得到这些响应而不是图像

HTTP/1.1 302 Found
Date: Fri, 05 Mar 2010 23:43:52 GMT
Server: Apache
Location: http://www.hosting.zymic.com/403
Content-Length: 216
Content-Type: text/html; charset=iso-8859-1
Via: 1.1 www.andrebatista.info
Connection: close

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>302 Found</title>
</head><body>
<h1>Found</h1>
<p>The document has moved <a href="http://www.hosting.zymic.com/403">here</a>.</p>
</body></html>

：我猜测这是基于 Referer 标头的某种反盗链措施的结果。

It's not a problem with the CSS or the server your blog is hosted on, but a problem with the server your website is hosted on. When I inspect the traffic with Fiddler, I get these responses in return, instead of the images:

HTTP/1.1 302 Found
Date: Fri, 05 Mar 2010 23:43:52 GMT
Server: Apache
Location: http://www.hosting.zymic.com/403
Content-Length: 216
Content-Type: text/html; charset=iso-8859-1
Via: 1.1 www.andrebatista.info
Connection: close

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>302 Found</title>
</head><body>
<h1>Found</h1>
<p>The document has moved <a href="http://www.hosting.zymic.com/403">here</a>.</p>
</body></html>

I'm guessing this is the result of some sort of anti-hotlinking measure based on the Referer header.

回复 原文
静若繁花 2024-08-31 14:42:07

好吧，当我在 Firefox 中访问那里时，我收到一条错误消息“没有帖子与我的查询匹配”，这让我怀疑您的服务器是否设置正确。

编辑：在 Chrome 中也是如此

Well, when I go there in Firefox I get an error saying "no posts match my query" which make me wonder if your server isn't set up right.

EDIT: Also true in Chrome

回复 原文
你怎么敢 2024-08-31 14:42:07

尝试将 URL 放在引号中。 （如果不是服务器问题，如其他答案所示，则 webkit 可能会因“://”而窒息。）

background:#064169 url("http://www.andrebatista.info/images/main_gradient_slice.jpg") repeat-x;

更多信息：CSS 背景图像 - 正确的用法是什么？

Try putting the URL in quote marks. (If it's not a server issue, as in the other answer, webkit might be choking on '://'.)

background:#064169 url("http://www.andrebatista.info/images/main_gradient_slice.jpg") repeat-x;

More info: CSS background-image - What is the correct usage?

回复 原文
~没有更多了~

关于作者

浪推晚风

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lorenzathorton8

文章 0 评论 0

Zero

文章 0 评论 0

萧瑟寒风

文章 0 评论 0

mylayout

文章 0 评论 0

tkewei

文章 0 评论 0

17818769742

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文