gpt4 book ai didi

html - 如何为位于页面中心的大图像定位背景?

转载 作者:行者123 更新时间:2023-11-28 18:20:37 26 4
gpt4 key购买 nike

我有一张尺寸为 2350*180 的图片。

我正在研究电话差距。因此,我需要以通用格式提供代码,以便它适用于任何设备。

现在,我有了一张大图片的背景图片。

style="background:url("img/bg.png") no-repeat fixed center top; width:100%; height:100%; "

这段代码只适用于少数人。我的代码有什么错误吗?

另一个问题,当我滚动时,滚动条是可见的。所以我添加了

style="overflow:hidden;"

<img src=""/> tag.

我是正确的还是应该添加任何其他代码?

编辑:

HTML

    <body style="style="background:url("img/bg.png") no-repeat fixed center top; width:100%; height:100%;" class="body">
<div id="image" class="noSelect">
<table class="table">
<tr>
<td class="main">
<img src="http://www.rhpstudio.com/images/google_icon.png" alt="map" usemap="#map" style="overflow:hidden;" />
</td>
</tr>
</table>
</body>

我在代码中考虑这个背景 background:url("img/bg.png") 中给出的这张图片是一个示例,但是它的尺寸是2350*180

EDIT:2-->完整代码

HTML 代码:

<body style="background-image:url(img/bg.png);" class="body">
<div id="image" class="noSelect" style="height:100%;">
<table class="table">
<tr>
<td class="main">
<img src="img/list.png" alt="bloodtestmap" usemap="#bloodtestmap" class="noSelect" style="overflow:hidden;" />
</td>
</tr>
</table>

CSS 代码:

    .body, .main_html
{
height: 100%;
margin: 0;
}
.body
{
overflow: hidden;
background-size: 100% 100%;
}
.table
{
width: 100%;
height: 100%;
text-align: center;
}
.main
{
max-width: 100%;
vertical-align: middle;
}

最佳答案

您现在可以将背景图像设置为以各种方式拉伸(stretch)到容器的边缘。如果您不介意图像失真,您可以这样做:

background-size: 100% 100%;

而不是这个(坏了)

style="style="background:url("img/bg.png") no-repeat fixed center top; width:100%; height:100%;"

在你的样式表中试试这个:

body {
background-image:url("img/bg.png");
background-size: 100% 100%;
}

关于html - 如何为位于页面中心的大图像定位背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16957030/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com