将背景图像放置在距右侧 1em 处?

2024-04-17

据我所知,不可能将 CSS 背景图像放置在距任何块的右边框 1em 处,也不可能放置图像距底部 1em 处。

以下代码将背景图像放置在距左侧 1em 和距顶部 2em 的位置。

<div class="foo" style="background: url('bar.png') no-repeat 1em 2em">
  Some text here
</div>

如果框的大小是动态的并且假设您无法更改 HTML,CSS 中是否有任何方法可以指定背景图像应该“距右边缘这么远”?

(百分比不起作用,因为框可以改变大小)

如果不可能,您需要对 HTML 进行的最小更改量是多少?

这是我想出的解决方法:

<style>
div.background
{
  float: right; 
  background: url('bar.png') no-repeat top left; 
  margin-right: 1em; 
  width: 16px; 
  height: 16px;
}
</style>
<div class="foo">
  <div class="background" style="">&nbsp;</div>
  Some text here
</div>

The CSS3 背景位置规范 http://www.w3.org/TR/css3-background/#background-position允许您将锚点从左上角更改为您想要的任何位置。例如,以下将设置图像的下下角距右侧 1em,距底部 2px:

background-position: right 1em bottom 2px;

已确认工作于:

IE9/10、火狐 13+、Chrome 26+、Opera 11+、Seamonkey 2.14+、Lunascape 6.8.0

截至2013年4月,仅IE6-8及部分边缘浏览器缺乏支持。

这是一个测试页面:http://jsbin.com/osoju​​z/1/edit http://jsbin.com/osojuz/1/edit

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将背景图像放置在距右侧 1em 处? 的相关文章

  • addEventListener keydown 不起作用

    我在互联网上找到了一些基本的 Pong 代码 并尝试添加按键 代码在这里 http cssdeck com labs ping pong game tutorial with html5 canvas and sounds http css
  • 元标记内的属性 property="og:title" 是什么?

    我有网站源代码的摘录 这是做什么的属性属性代表什么 其目的是什么 og title是开放图元标签之一 og 属性定义社交图中的对象 例如 Facebook 使用它们 og title代表对象的标题 因为它应该出现在图表中 请参阅此处了解更多
  • 强制 PayPal 始终请求信用卡信息而不是登录表单?

    我们的网站采用贝宝付款标准 当用户在我们的网站上填写他们的请求并按下 PayPal 按钮 立即购买 时 我们会将所有变量提交给 PayPal 以便他们可以处理付款 对于那些以前从未使用过贝宝并通过我们的网站付款的用户来说 它运行得非常好 因
  • 自动更改时 onChange 事件不起作用

    我在一个选择框 usageDisplays 上有一个 onChange 事件 它根据第一个选择框的选定值填充下一个选择框
  • 如何在 scss 中包含仅限 Safari 的样式? [复制]

    这个问题在这里已经有答案了 我只是想修改仅适用于 safari 浏览器的样式属性 这将覆盖默认属性 简单的例子 Default div color blue Safari 浏览器 div color red 我想这可以通过 scss 的 i
  • 修复了当 CSS 过滤器应用于 Microsoft Edge 中的同一元素时不起作用的位置

    我正在 Edge 20 10240 16384 0 上测试这个 我有一个位置固定的元素 并且应用了 CSS 过滤器 这在除 Microsoft Edge 之外的所有浏览器中都非常有效 其中元素的位置不保持固定 此问题与 CSS3 过滤器直接
  • 使用 Java 编程式 HTML 文档生成

    有谁知道如何在 Java 中以编程方式生成 HTMLDocument 对象 而不需要在外部生成字符串 然后使用 HTMLEditorKit read 来解析它 我问的两个原因 首先 我的 HTML 生成例程需要非常快 并且我认为将字符串解析
  • contenteditable,在文本末尾设置插入符号(跨浏览器)

    输出在Chrome div style border 1px solid 000 width 500px height 40px hey div what s up div div div div
  • jQuery 无法在外部 JavaScript 中工作

    我是 jQuery 新手 遇到了一些奇怪的问题 我正在使用 jQuery 的change and click方法 在我的 HTML 文件中使用时它们工作正常
  • 如何将水平 ul 列表中的项目与图像垂直对齐?

    我有以下 html 代码 div ul li a href index php site login About a li li a href index php site login FAQ a li li a href http twi
  • 有什么特别好的理由在 javascript 目标链接上继续使用 href='#' 吗?

    众所周知 像这样的代码是非常常见的 a href class edit Edit a 然后将其连接到事件处理程序 使用 jQuery 或当今流行的任何东西 甚至使用内联 js 处理程序 a href Edit a 我知道这是在链接上显示指针
  • 关闭 Godot 中的游戏

    我正在使用 Godot 创建网页游戏 为了关闭游戏 我尝试使用 get tree quit 如果我在 IDE 上使用它 它就可以工作 当我在我的服务器上尝试它时 导出项目后 它不起作用 我确信导出设置没问题 我怎样才能关闭游戏 并且 如何添
  • 使用 jQuery 对 CSS 变换进行动画处理

    我正在尝试为 div 制作动画 并让它绕 y 轴旋转 180 度 当我调用以下代码时 出现 jQuery 错误 my div animate transform rotateY 180deg webkit transform rotateY
  • 为什么有人将(Apache mod_expires 参数)ExpiresByType 设置为“访问加 0 秒”?

    在审查答案时这个帖子 https stackoverflow com questions 9933012 how to use mod headers and mod expires to cache 我不明白为什么这里使用 0 秒作为最佳
  • 在 JavaScript 中引用 C# 变量

    我已经阅读了很多线程 但我不明白为什么这不起作用 我正在创建一个将用作导航栏的 SharePoint Web 部件 一切都很顺利 直到我尝试在 JS 代码中引用 C 变量 这是来自 VisualWebPart1UserControl asc
  • 如何像在浏览器中一样检索准确的 HTML

    我正在使用 Python 脚本来呈现网页并检索其 HTML 它适用于大多数页面 但对于其中一些页面 检索到的 HTML 不完整 我不太明白为什么 这是我用来废弃此页面的脚本 由于某种原因 每个产品的链接不在 HTML 中 Link http
  • 将 DIV 转换为单击并拖动视口

    有人知道一种不显眼的 基于原型或无框架的方法将具有大内容 例如地图 的 DIV 转换为具有固定尺寸的可点击和可拖动的 地图 容器 非常像 Google 地图 我想在大型输入表单中显示 HTML 块 这些块可能会超出可用空间 每个块可以有大约
  • 将水平线添加到 html rmarkdown 文档隐藏文本部分

    我正在制作一个与 HTML 页面结合的 Rmarkdown 文档 我不想用标题或项目符号分隔某些文本部分 而是想在它们之间绘制水平线 根据http rmarkdown rstudio com authoring basics html ht
  • 响应覆盖 div 下的链接

    场景是这样的 我已经构建了一个顶部导航原型 它需要在其顶部有一个覆盖 透明 PNG 图像 目前它覆盖了大约 1 3 的链接 请看下面 有什么方法可以让前 1 3 的链接做出响应 即使有一个 div div 部分覆盖它们 覆盖层不会包含任何可
  • jQuery - 动画CSS背景大小?

    我正在尝试对背景图像的大小进行动画处理 但它不起作用 从以下代码中知道为什么吗 this animate opacity 1 background size 70px 48px right 39 top 45 250 注意 所有其他属性都可

随机推荐