<hr> tag as an Image

问题

Id like to use a custom .png as a hr line

Here is my image:

This is the code I wrote, but it doesn't work:

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

I don't want it to repeat, Just want one in the middle of the page. If it helps in anyway I am using bootstrap.

Thanks in advance, Tom

回答1:

You just need to add

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

a simple google search can find this...

first result of google when searching how to center backgrounds http://www.w3schools.com/cssref/pr_background-position.asp

回答2:

Add no repeat property to your <hr> background's CSS.

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

or

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

回答3:

Try like this:

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

回答4:

maybe you need something like this?

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

https://fiddle.jshell.net/r9usqnc6/1/

来源：https://stackoverflow.com/questions/32499132/hr-tag-as-an-image