Question

好吧，对于我的网站，用户/会员可以选择上传/链接自定义图片以用于我网站的起始页面。这适用于几乎所有支持背景大小的新浏览器。但如果浏览器不支持css3 background-size，则不会用图像填充整个div部分。

昨天我有机会在一台25英寸的显示器上测试我的网站，最终意识到图像显示部分失败。最终发生的事情是图像向左移动。

今天检查代码我忘了我在“背景位置：左上角”中有这条线。但我记得为什么我把它留在代码中，当我添加“顶部中心”或者只是“顶部”时，背景仍然显示，但是在它的左边有6-10 px的白色斑点。我试过用左：0px;但由于我使用的位置是固定的，因此无法使其工作;如果我将其更改为position：absolute它会显示完整的图像，最终会在底部创建一个滚动条。

以下是我目前正在使用的CSS部分的代码

#cpBackgroundImg  { 
background-repeat: no-repeat;
background-clip: border-box;
background-origin: padding-box; 
background-attachment: fixed;
background-position: top left;
position:fixed;
z-index:-10;
margin-right: 0px;
margin-left: 0px;
background-size:100%;
}

这是实际显示图像的代码的另一部分

<div style="display: block; opacity: 0.99999; width: 1600px; height: auto; left: 0px; right: 0px; top: 0px; bottom: 0px; background-image: url(<?php echo base64_decode($_COOKIE['phx_utmc_session']); ?>);" id="cpBackgroundImg"></div>

有人可以告诉我如何解决这个问题吗？ - 谢谢

http://jsfiddle.net/Hnwjg/6/

Answer 1

width: 1600px;

您测试的显示器是否具有大于1600的分辨率？如果是这样，div看起来像是将图像的宽度限制为1600.这意味着图像右侧会有空白区域？

只是一个想法。

css背景大小失败以及图像位置

1 个答案: