缩放时保持图像正确显示 (HTML)
我有一个带有表单标签的网页。在表单标签之外（在正文中），我想在表单标签的左侧设置一个背景图像（该背景图像的目标是从正文的黑色背景颜色渐变到表单颜色灰色）
我的问题是，当“放大”浏览器时（显然缩放朝向表单），我预计图像会逐渐超出屏幕，但事实是图像仍然显示，但颜色变暗当我放大时。最后，屏幕的左边缘变黑。我看起来图像不接受离开屏幕。
放大前：
放大后： 
使用的图像：
我的代码：
table cellspacing="0" cellpadding="0" class="myTable">
<tr>
<td class="TopLeft">
</td>
<td class="Top">
</td>
<td class="TopRight">
</td>
</tr>
<tr>
<td class="Left">
</td>
<td>
<table cellspacing="0" cellpadding="0">
<tr>
<td class="mTop" colspan="3">
</td>
</tr>
<tr>
<td class="mLeft">
</td>
<td class="middle">
<form id="Form1" runat="server">
<div class="page">
<div class="main">
ASDFGGH
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</div>
</form>
</td>
<td class="mRight">
</td>
</tr>
<tr>
<td class="mBottom" colspan="3">
</td>
</tr>
</table>
</td>
<td class="Right">
</td>
</tr>
<tr>
<td class="BottomLeft">
</td>
<td class="Bottom">
</td>
<td class="BottomRight">
</td>
</tr>
我只会放置该类的 CSS：“Left”
.Left
{
width: 113px;
height: 761px;
background-image: url('../Images/L.jpg');
}
谢谢...
I have a web page with a form tag. Outside the form tag (in the body) I wanted to set a background image to the left of the form tag (the goal of that background image is to gradient from the back-color of the body which is black to the form color which is Grey)
My problem is that when 'zooming in' the browser, (obviously the zoom goes toward the form), I expect the image to be out of the screen gradually, but the fact is that the image is still displayed but it goes darker as I zoom in. At the end the left edge of the screen becomes black. I looks like the image does not accept to leave the screen.
Before Zooming in:
After Zooming in:
The image that is used:
My code:
table cellspacing="0" cellpadding="0" class="myTable">
<tr>
<td class="TopLeft">
</td>
<td class="Top">
</td>
<td class="TopRight">
</td>
</tr>
<tr>
<td class="Left">
</td>
<td>
<table cellspacing="0" cellpadding="0">
<tr>
<td class="mTop" colspan="3">
</td>
</tr>
<tr>
<td class="mLeft">
</td>
<td class="middle">
<form id="Form1" runat="server">
<div class="page">
<div class="main">
ASDFGGH
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</div>
</form>
</td>
<td class="mRight">
</td>
</tr>
<tr>
<td class="mBottom" colspan="3">
</td>
</tr>
</table>
</td>
<td class="Right">
</td>
</tr>
<tr>
<td class="BottomLeft">
</td>
<td class="Bottom">
</td>
<td class="BottomRight">
</td>
</tr>
And I will put only the CSS of the class: "Left"
.Left
{
width: 113px;
height: 761px;
background-image: url('../Images/L.jpg');
}
Thank you...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我不确定这是一个可以有明确答案的问题。对于浏览器如何放大页面没有公认的标准。 Firefox、IE 和 Chrome 的做法都不同。除了Firefox之外，其他浏览器也有同样的问题吗？
您可能还需要考虑重新编写代码，以便它使用 div 而不是表格来布局页面，尽管这会花费一些精力。这可能会导致页面按照您的预期缩放。
有没有一个地方我们可以去查看所有代码，以便我们可以摆弄它，也许更容易找到潜在的解决方案？
I'm not sure that this is a question that can have a definite answer. There is no accepted standard for how a browser should zoom in on a page. Firefox, IE, and Chrome all do it differently. Is the problem the same in other browsers besides Firefox?
You might also want to consider reworking your code so that it uses divs instead of tables to lay out the page, though that will take some energy. That might result in a page that will zoom as you expect it to.
Is there a place we can go to see all the code, so that we can fiddle with it and perhaps more easily identify a potential solution?
最后...问题出在 CSS 属性上：“background-position”默认设置为 left。所以我设置了
，问题就解决了
Finally... the problem is concerned in the CSS property: "background-position" that is set to left by default. So I set
And the problem is solved