Wie hr Designer

Question

machen wollen hr wie dieses img1

und

img2

nicht bekannt, wie dies zu erreichen, machen.

Answer 1

Ich bin ziemlich sicher, dass die Verwendung <hr> ist nicht die empfohlene Möglichkeit, das zu tun. Sie könnten nur versuchen:

<div><img src='http://i.stack.imgur.com/Llk2U.png'><div> 

Oder eine css Klasse verwenden, um es eleganter etwas zu machen:

.whybuyfromus 
 
{ 
 
    background: url('http://i.stack.imgur.com/Llk2U.png') no-repeat; 
 
    height: 101px; 
 
    background-size: contain; 
 
} 
 

<div class="whybuyfromus" />

Answer 2

versuchen Sie dieses:

.hr { 
 
    background-image: url(http://i.stack.imgur.com/Llk2U.png); 
 
    height: 100px; 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
    }

<div class="hr" />

Answer 3

Ich weiß, dass dies bereits eine akzeptierte Antwort hat, aber ich wollte sehen, ob es möglich war, eine voll reaktionsfähige Version mit CSS zu erstellen. Ich fand eine Lösung mit Flexbox:

.fancy-hr { 
 
    display: flex; 
 
    background-image: 
 
    url(http://i.imgur.com/ZmheWg5.png), 
 
    url(http://i.imgur.com/ph3e3OT.png); 
 
    background-size: 115px 100%; 
 
    background-position: 0 0, 100% 0; 
 
    background-repeat: no-repeat; 
 
    height: 37px; 
 
    box-sizing: border-box; 
 
    padding: 0 115px; 
 
} 
 

 
.fancy-hr:before, 
 
.fancy-hr:after { 
 
    content: ""; 
 
    flex: 1; 
 
    background: url(http://i.imgur.com/NBus6Hr.png) repeat-x; 
 
} 
 

 
.fancy-hr span { 
 
    display: inline-block; 
 
    height: 100%; 
 
    line-height: 37px; 
 
} 
 

 
.fancy-hr span:before, 
 
.fancy-hr span:after { 
 
    content: ""; 
 
    width: 10px; 
 
    height: 100%; 
 
    display: inline-block; 
 
} 
 

 
.fancy-hr span:before { 
 
    background-image: url(http://i.imgur.com/wMU1oDn.png); 
 
    float: left; 
 
} 
 

 
.fancy-hr span:after { 
 
    background-image: url(http://i.imgur.com/4Q2el3J.png); 
 
    float: right; 
 
}

<div class="fancy-hr"><span>Text here</span></div>