html - 拉伸背景图像设置为 hr 标签

Question

我有一个网页，我有hr标签来分隔页面中的部分。

我正在使用 css 将图像作为背景应用于 hr 标签。

hr 标签占用 100% 的宽度，但图像不会占据整个标签。

如何强制图像占据hr标签占据的整个区域？

是否有任何拉伸属性可用于端到端拉伸图像？

下面是代码：

hr
{

    background: url("images/new/edge-top.png") no-repeat scroll 0 0 transparent;
    color: transparent;
    height: 10px;
    margin: 0 auto;
    width: auto;
    clear: both;
    border: 0 none;
    display: block;
    padding: 0px;

}

在此处检查生成的图像：

Answer 1

CSS3 对此有一些新的选择。尝试

background-size: x% x%;

在这里您可以阅读新背景模块的规范。

但是请注意，这 在 IE 中的支持非常差！（有人惊讶吗？）