<hr> 标签作为图像答案

【问题标题】：<hr> tag as an Image<hr> 标签作为图像
【发布时间】：2015-09-10 18:22:53
【问题描述】：

我喜欢使用自定义 .png 作为 hr 线

这是我的图片：

这是我写的代码，但它不起作用：

hr { 
display: block;
margin-left: auto;
margin-right: auto;
height:20px;
background:url(../img/bocLine.png);
border:0;
border-color: #000;
}

我不想重复，只想在页面中间有一个。如果它有帮助，我正在使用引导程序。

提前致谢，汤姆

【问题讨论】：

【解决方案1】：

你只需要添加

background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;

一个简单的谷歌搜索可以找到这个...

【讨论】：

【解决方案2】：

试试这样：

hr { 
display: block;
margin: 0 auto;
height:20px;
background:url(../img/bocLine.png) no-repeat center top; 
border:0;
}

【讨论】：

【解决方案3】：

在<hr> 背景的 CSS 中不添加重复属性。

background-image: url(../img/bocLine.png);
background-repeat: no-repeat;

或

background: transparent url(../img/bocLine.png) no-repeat center center;

【讨论】：

【解决方案4】：

也许你需要这样的东西？

hr {
    background:url("image.png") no-repeat top center;
    height:42px;
    border:none !important;
}

【讨论】：