CSS背景图像不定位底部答案

【问题标题】：CSS background image not positioning bottomCSS背景图像不定位底部
【发布时间】：2012-02-22 05:53:46
【问题描述】：

我在尝试将 SVG 放置在 div 的底部时遇到了一个奇怪的问题：

svg 源如下：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="grad" x1="0" y1="0" x2="100%" y2="0">
        <stop offset="0" stop-color="#FFF" />
        <stop offset="0.1" stop-color="#FFF" />
        <stop offset="0.5" stop-color="#B1B1B1" />
        <stop offset="0.9" stop-color="#FFF" />
        <stop offset="1" stop-color="#FFF" />
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="100%" height="1px" style="fill:url(#grad)" />
</svg>

如何让 svg 出现在文本下方（如边框底部）？

我对早期的浏览器并不完全在意，如果它需要 CSS 3 属性我很高兴！

编辑：如果没有比绝对定位更好的方法，我将在下面添加另一个 div 来提供效果。

编辑 2： 我不确定我需要对 SVG 做些什么不同的事情，但使用 PNG 定位底部效果很好：http://jsfiddle.net/YXRQX/1/

我需要在 SVG 代码中指定什么以使其正常工作吗？

编辑 3： 此处的最终工作 jsFiddle：http://jsfiddle.net/GsPhA/4/ 感谢 Ryan 的指点！

【问题讨论】：

那个 div 会一直是那个特定的高度吗？或者，在不同的应用程序中会有所不同吗？换句话说，它必须相对于底部，还是可以相对于顶部？
jsfiddle.net/skram/GsPhA/3 - 这是你想要的吗？
我想知道这一点。出于某种原因，我在你的 jsfiddle 中丢失了 SVG。
它应该只出现在 div 的底部。 SVG写错了吗？还是它只是不想工作？
似乎 SVG 正在动态调整大小以填充它需要填充的任何空间。我不知道如何阻止它这样做，但我认为这是这里的问题。

标签： html css svg

【解决方案1】：

完成了！感谢 Ryan 的指点，我添加了 background-size css 属性来将大小固定为 1px 高：

.ucp-controls {
    text-align: center;
    margin-top: 10px;
    padding-bottom: 2px;
    margin-bottom: 5px;
    color: #242424;
    cursor: default;

    background: url('http://priddle.serveblog.net/sums2/images/header/line.png') bottom no-repeat;

    background-size: 100% 1px; // The key line; preserves the width but locks the height.
    font-family: Arial;
}

最后，SVG 会根据作为背景的容器的大小调整自身的大小。

【讨论】：

【解决方案2】：

只要两者都在同一个容器中，文本就应该像下面这样位于 SVG 对象的上方：

<center>
<p>Sample Text Here</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="grad" x1="0" y1="0" x2="100%" y2="0">
        <stop offset="0" stop-color="#FFF" />
        <stop offset="0.1" stop-color="#FFF" />
        <stop offset="0.5" stop-color="#B1B1B1" />
        <stop offset="0.9" stop-color="#FFF" />
        <stop offset="1" stop-color="#FFF" />
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="100%" height="1px" style="fill:url(#grad)" />
</svg>
</center>

【讨论】：

SVG 不在 HTML 源代码中。它被用作背景图片。