【问题标题】:CSS background-position combined typesCSS background-position 组合类型
【发布时间】:2011-08-09 14:06:09
【问题描述】:

CSS3 背景自定义是一个强大的工具,但对我来说它缺少一个功能。我可以通过几种方式设置 background-position,但我需要一些组合。例如,有一个动态调整大小的 div,我需要一个距离右边框 15px 的右中向图像。我找不到任何方法来处理这个问题。 我可以使用两个修复程序,但没有一个是优雅的。
1.我在图片右侧留了一个15px的空白区域。
2. 我用这个:背景位置:97% 50%
但是,在第二种情况下,如果重新调整 div 的大小,则计算出的右边距将不正确。 或者,我使用标准图像而不是 bg-image,但我尽量避免这种情况。
那么,有什么解决办法吗?
谢谢!

【问题讨论】:

  • 你还需要div中的文字一直向右吗?或者它也可以从右边15px?
  • div 内的文字左对齐。而且,当然文字不能越过img,所以我需要放一个right-padding。
  • “当然,文本不能超过 img。”嗯,这与用于 XD 的 background-image 几乎相反。如果您希望图像是顶部没有文字的物理实体,我会使用 img 标签,我可以为您放置类似性质的东西。
  • 我知道,这与实际用法相差甚远,我只是对此感兴趣。这种方法的优点可能是图像不会直接出现在 DOM 中。

标签: css background-position


【解决方案1】:

CSS3 扩展了background-position 以实现这一点。例如,您可以这样做:

background-position: right 15px bottom 15px;

很遗憾,目前只有 Opera 支持此功能。

但是,您想要这样做的常见原因是您有 15 像素的内边距。如果是这种情况,您可以这样做:

background-origin: content-box;
background-position: right bottom;

每个 CSS3 浏览器都支持。

【讨论】:

  • 这绝对是我要找的!情况如您所述,填充现在将图像从边框移动。谢谢!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2012-03-28
  • 1970-01-01
  • 2014-06-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多