Wie man den mittleren Teil der geschnittenen Bildwiederholung für langes Menü macht?

Question

sehen, dass der Hintergrund für den langen Text nicht wiederholt wird.

Die rote/kastanienbraune Farbe ist ein Bild, das als Ganzes geschnitten ist (kein mittlerer Teil in Scheiben geschnitten) oder mit anderen Worten, es ist ein einzelnes Bild.

Sagen Sie, dass ich den mittleren Teil geschnitten habe, so dass es sich wiederholen kann, wenn das Menü länger wird, wie kann ich es in die CSS aufnehmen?

So schließe ich das einzelne Bild derzeit ein.

ul a:hover{ 
     background-image: url("<?php echo get_template_directory_uri()?>/images/slices/slanted-hover.gif"); 
     color:#fff; 
     background-repeat: no-repeat; 
     min-width: 50px; 
    } 

Erwartetes Ergebnis wie unten, wo das ganze Wort von dem Hintergrundbild bedeckt ist:

Wenn noch nicht klar ist, finden Sie hier:

Alles, was ich tun möchte, ist,

Ich möchte das schwarze Rechteck wiederholt werden. Im Idealfall, wenn ich scheiße, wird es Bilder geben. Wie benutze ich es als Hintergrund für das Menü (alle Bilder zusammenfügen) und wiederhole die mittlere (schwarzes Rechteck) Wiederholung?

Answer 1

Sie nicht wirklich brauchen, zu diesem Zweck ein beliebiges Bild zu verwenden. Ein einfacher Trick mit nur CSS 2D transform und pseudo-elements wird gut funktionieren, und diese beiden Spezifikationen werden in modernen Browsern in der Praxis weitgehend unterstützt.

Die einzige Änderung, die Sie für Ihr Markup benötigen, besteht darin, Ihren Linktext in ein zusätzliches <span>-Element zu verpacken, damit ein ordnungsgemäßes Z-Index-Stacking funktioniert.

Die einzige Einschränkung mit diesem Trick besteht darin, dass ein Teil des schiefen Pseudoelements aus der Begrenzungsbox des übergeordneten Elements herausragt, wenn Sie einen Schräglauf anwenden. Dieser Vorsprung hängt vom Schrägstellungswinkel und der Höhe der Verbindung ab, kann jedoch berücksichtigt werden, indem linke und rechte Polster auf dem Element <ul> gesetzt werden, um sicherzustellen, dass sie nicht überlaufen.

ul { 
 
    background-color: #eee; 
 
    list-style: none; 
 
    padding: 0 1.5rem; /* Spacing to account for skewed edges protruding out of box */ 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 
ul li a { 
 
    color: #000; 
 
    float: left; 
 
    padding: .75rem 1.5rem; 
 
    position: relative; 
 
    transition: all .25s ease-in-out; 
 
} 
 
ul li a span { 
 
    position: relative; 
 
} 
 
ul li a::before { 
 
    background-color: #b13131; 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    transform: skew(-10deg); 
 
    transition: all .25s ease-in-out; 
 
    opacity: 0; 
 
} 
 
ul li a:hover { 
 
    color: #fff; 
 
} 
 
ul li a:hover::before { 
 
    opacity: 1; 
 
}

<ul> 
 
    <li><a href="#"><span>Item 1</span></a></li> 
 
    <li><a href="#"><span>Item 2 that is a little bit too long</span></a></li> 
 
    <li><a href="#"><span>Item 3</span></a></li> 
 
</ul>

Answer 2

reine CSS-Lösung sollte alle gängigen Browsern wie IE arbeiten in> = 9.

ul a { 
    position: relative; 
} 

ul a:hover::after { 
    content: ""; 
    z-index: -1; 
    position: absolute; 
    top: 0; 
    right: -.8em; 
    bottom: 0; 
    left: -.8em; 
    background-color: red; 
    transform: skewX(-15deg); 
}