绝对真实的居中背景图像

2023-12-05

我有一个网站,其中居中的背景图像在主页动画中起着至关重要的作用。

背景会一直居中,直到浏览器窗口无法适应网站的宽度,此时背景会左对齐。

这是我的身体代码:

body {
line-height:1;
margin:0px auto;
padding:0px;
background:#90a830 url(img/bg.png) no-repeat center top;
}

图像弹出窗口从背景图像上的正确位置弹出。尝试缩小浏览器窗口,您就会明白我的意思,背景移动不对齐。

thanks

Andy


将背景左设置为 50%,并将背景左边距设置为 0 减去背景宽度。这样它将始终在浏览器窗口的水平中心显示图像的水平中心。

查看我的 JSbin 演示here。我重复使用了你的图像,所以它与下面的其他示例图像看起来很奇怪!

CSS:

body {
  line-height:1;
padding:0px;
  margin-left:-575px; /* half your background image width */
  background:#90a830 url(http://www.apb-media.co.uk/uploads/background.jpg) 50% top;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

绝对真实的居中背景图像 的相关文章

  • 在 Chrome 中,应用于包含图像的锚点的轮廓高度不正确

    对于我正在开发的网站 我希望当链接聚焦 悬停 活动时 链接周围会出现虚线轮廓 我希望文本和图像链接发生这种情况 我遇到的问题是 虽然我的代码在 Firefox 和 IE 中运行良好 但在 Chrome 7 0 517 41 中 虚线轮廓与我
  • 如何使用div绘制曲线?

    我需要使用 CSS 绘制两条曲线 我尝试过组装一些divs 使用CSSborder radius绘制弧形面板 但结果很糟糕 还有更好的算术吗 正如我之前在评论中提到的 请不要使用CSS用于实现复杂的曲线和形状 虽然仍然可以使用 CSS 来实
  • CSS3 转换会立即发生吗?

    我有一个名为 artwork需要动画化 artwork webkit transition all 20s ease in transition all 20s ease in width 75 display block margin 0
  • 响应式 CSS 图像锚点标签 - 图像地图样式

    我一直在开发一个响应式网站 并且在图像映射方面遇到了一些问题 图像映射似乎不适用于基于百分比的坐标 经过一番谷歌搜索后 我发现了一个 JS 解决方法 http mattstow com experiment responsive image
  • 没有嵌套容器的桌面和移动 Flexbox 布局

    我有 3 个 div 它们必须按移动布局的特定顺序排列 但我必须将第 2 个 div 作为桌面布局的侧边栏 所以对于移动设备 分区1 分区2 分区3 对于桌面 分区1 div2 分区3 在桌面布局中 div 2 有阴影背景 因此必须是父级的
  • 输入和文本字段中的背景颜色

    我想更改表单文本和输入字段中的颜色背景 但是当我这样做时 它也会影响提交按钮 是否可以通过其他不影响按钮的方式来完成 我用过这段代码 input textarea background color d1d1d1 input type tex
  • CSS 中 calc() 的结果是什么

    我们现在已经开始使用calc 在CSS中 用于设置计算结果的宽度 例如 div div div div parent width 100px calcWidth width calc 100 3px height 100px backgro
  • 夜间值班。单击带有文本的元素

    我遇到问题 无法单击具有某些独特文本的网页元素 我有这样的结构 div class wg wagon type title Text div 我试试这个 click wg wagon type title contains Text 但我有
  • 如何检查元素的内容是否为空,如果是,则在 jquery 中删除该元素

    我目前正在尝试选择某个 div 内没有内容的任何 h2 元素并将其删除 这是我的 html 代码 div class skipToContainer h2 class vidSkipTo Hello h2 h2 class vidSkipT
  • c# 如何生成锦标赛括号 HTML 表

    所以我已经被这个问题困扰了三个星期 但我一生都无法弄清楚 我想做的是使用表格获得这种输出 演示 http www esl world net masters season6 hanover sc2 playoffs rankings htt
  • 如何在 Bootstrap 列中使用文本溢出?

    假设我有一行具有固定高度 并且我在其列中插入了一些文本 如果太长 我希望将其剪掉 并在行尾添加三个点 如下所示 我在用着文本溢出 省略号 我的行中有此属性 但无法使其工作 JsFiddle http jsfiddle net Alexnot
  • 如何设置旋转元素背面的样式?

    我有一个figure它是可旋转的 通过用户输入任意角度 该旋转明显地使用transition财产 当该元件旋转超过 90 度 90 度时 元件的背面可见 我想对元素的通常隐藏的一面进行与正面不同的设计 但我不确定如何实现这一点 figure
  • 两种颜色边框

    客户想要两种颜色的边框以获得浮雕外观 我可以在一个元素上执行此操作吗 我希望避免堆叠两个具有单独边框的 DOM 元素 是的 使用outline财产 它充当您边界之外的第二个边界 但请注意 它可能会以一种奇怪的方式与边距 填充和阴影进行交互
  • 由于 MIME 类型不受支持,拒绝应用样式

    我不断收到一条错误消息 指出 MIME 类型 text html 不可执行或不是受支持的样式表 MIME 类型 并且启用了严格的 MIME 检查 我的链接代码是
  • CSS3 box-shadow 用于类似重叠的 div

    我正在尝试用css3来实现这种效果 HTML 代码显然是这样的
  • 如何动态打破 FlexBox 列以开始新列

    I have a dynamic list of items containing text placed column wise which I need to break after every 5th item 我只有两个限制 每个
  • 如何更改bootstrap中form-control弹出窗口中必填字段的默认消息?

  • 如何在没有@import的情况下减少@import?

    我用的较少 从 Google PageSpeed 我了解到 使用 importCSS 文件中的内容会影响网站速度 所以我想排除任何 import来自我的 CSS 的东西 我有 2 个不同的样式表reset css and rebuild c
  • 指针事件:无,过滤,适用于 ie8 和任何地方,不适用于 ie9

    正如我在这里看到的 https stackoverflow com questions 3680429 click through a div to underlying elements 4839672 4839672 过滤器可用于模拟跨
  • CSS 是否有不等于选择器?

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

随机推荐

  • HTML select - 在 HTML 中显示值属性但保留选项文本

    我有一个清单option各州在select元素
  • 获取 Blazor 组件中的当前用户

    我正在使用 Blazor 和 Windows 身份验证启动一个新站点 并且需要识别当前查看页面 组件的用户 对于 Razor 页面 可以使用以下命令访问当前用户名Context User Identity Name 但这似乎在 Blazor
  • React 类组件与功能组件[重复]

    这个问题在这里已经有答案了 Before React16 class components被使用过functional components每当需要使用时state or lifecycle methods在你的组件中 在最新版本中引入了
  • 背景图像渐变

    我有一个具有透明背景的图像 我想将其作为所有控件后面的图像覆盖在我的窗口上 我的窗口背景已经有一个渐变画笔 但通过谷歌搜索和实验我可以看出 你不能有两个背景画笔 这是不起作用的 XAML 你有什么建议 也许还有另一种设置图像的方法
  • float 对象没有属性 __getitem__

    这是我从这个函数中得到的错误 TypeError float object has no attribute getitem The self target只是一个元组并且self x and self y是整数 我不知道我做错了什么 cl
  • ' 的 ViewData 项”' aria-label='我收到错误“没有类型为 'IEnumerable' 的 ViewData 项”'> 我收到错误“没有类型为 'IEnumerable' 的 ViewData 项”

    我收到错误 不存在具有键 TIMEZONE 的 IEnumerable 类型的 ViewData 项 View 控制器 ViewData TIM
  • Word 可以直接从 Web 服务器编辑文档而不需要 Sharepoint 吗?

    我有一个看起来很简单的用例 但在谷歌搜索后我找不到解决方案 我在 FTP 服务器上有一些 Word 文档 我希望能够创建一个链接 将它们下载到 Word 中 然后允许将保存的更改发送回 FTP 服务器 问题是我只能让 Word 从 FTP
  • Android Studio NDK 错误,无法找到 GLES3/gl3.h,尽管它存在

    我正在尝试在 Android Studio 上制作一个使用 NDK 和 OpenGL ES 3 0 的应用程序 当我 include 时 IDE 在我输入时会自动完成 我认为这是一个标志 意味着 IDE可以找到它 但是 我收到错误 错误 2
  • python 使用带请求的 multipart/form-data 为 POST 设置边界

    我想使用请求发送文件 但服务器使用固定边界设置 我只能发送文件 但requests模块创建一个随机边界 我该如何覆盖它 import requests url http xxx xxx com uploadfile php fichier
  • 是否可以提供一种将对象转换为角度模板字符串的隐式方法?

    假设我有一些具有相同原型的对象 并且我想在 Angular 模板中自定义它们的显示 我知道我可以创建自己的过滤器 然后像这样使用它 p anObjectOfProtoP myCustomFilter p 或附加到 scope 的函数 p m
  • 外键参考复合主键

    该数据库将存储有关硬件设备及其收集的数据的信息 我创建了一个设备表来存储可用的硬件设备 CREATE TABLE IF NOT EXISTS devices deviceID int 10 unsigned NOT NULL AUTO IN
  • 新窗口句柄在 IE 中消失,无法切换到新窗口

    我在 Internet Explorer 10 中使用最新版本的 Selenium 2 37 0 和 C 使用最新的 32 位 InternetExplorerDriver 2 37 0 登录网页 单击打开新窗口的按钮 然后然后将焦点更改到
  • CSS渐变产生虚线

    我需要打印 textarea 内容 用户输入 我只是使用 css 渐变在文本下方生成线条 下面的 css 对我来说很有效 linedText color 000000 line height 24px background color ff
  • C# 线程安全与 get/set

    这是 C 的详细问题 假设我有一个带有对象的类 并且该对象受锁保护 Object mLock new Object MyObject property public MyObject MyProperty get return proper
  • 画布中的模糊 svg

    为什么 SVG 在画布中无法正确缩放 全是像素化且模糊 我究竟做错了什么 我想要的只是 SVG 图像无论画布大小如何都能保持其纵横比 并且不会变得模糊 var canvas document getElementById screen ct
  • 根据填充颜色索引删除行

    我正在尝试删除范围内的所有行A7 AI300包含黄色填充的单元格 颜色索引 6 我有一些代码将删除包含该颜色的所有行 但我遇到的问题是它正在尝试运行整个工作表的代码并将冻结我的工作簿 我正在尝试插入一个范围以加快计算速度 谁能告诉我如何插入
  • 每个 Pandas 数据框行的词频

    我正在尝试找出如何获取每个数据帧行中最常见的单词 比如说前 10 个最常见的单词 我的代码可以获取整个 DF 中最常见的单词 但现在我需要更精细 import pandas as pd import numpy as np df1 pd r
  • 实体框架 4 未关闭 sql server 2005 profiler 中的连接

    我第一次在 ASP net 应用程序中使用实体框架 4 我想确保数据库连接在离开using语句后关闭 但是 在SQL Server 2005分析器中 我在离开using时看不到连接注销 只能看到输入时的登录 例如 我从一个空白的 asp n
  • 在 Matlab 中生成矩阵的所有可能组合

    知道该矩阵的元素只能是 0 或 1 如何生成 N M 矩阵的所有可能值 例如 如果我想要一个 2 2 矩阵 我们会得到 16 个具有不同可能组合的矩阵 0 0 0 0 1 1 1 1 1 0 0 1 1 1 0 0 0 0 1 1 等 Us
  • 绝对真实的居中背景图像

    我有一个网站 其中居中的背景图像在主页动画中起着至关重要的作用 背景会一直居中 直到浏览器窗口无法适应网站的宽度 此时背景会左对齐 这是我的身体代码 body line height 1 margin 0px auto padding 0p