如何在長菜單中重複切片圖像的中間部分？

看到背景沒有重複的長文本。

紅/褐色的是切片的整體的圖像（切片沒有中間部分），或在其它字其單個圖像。

說我切的中間部分，以便它可以重複的菜單變長，我怎麼可以將其包含在CSS？

這是我包括單個圖像當前。

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; 
    }

預期結果如下圖所示，在整個單詞是由背景圖像覆蓋：

如果還不清楚，請在這裏看到：

所有我想做的事是，

我想要重複黑色矩形。理想情況下，當我切片它將在那裏圖像。那麼如何將它作爲菜單的背景（將所有圖像放在一起）並重復中間（黑色矩形）重複？

來源

2017-04-12 112233

你能不能幫我張貼的你想怎麼做你的東西PIC可視化你的要求是什麼？對不起，但我無法完全理解你的問題。 – Sagar

這可以在沒有任何圖像的情況下完成，您需要定位哪些瀏覽器？ –

@LarsBeck所有常見瀏覽器，例如IE11，Firefox，Chrome – 112233

你實際上並不需要使用任何圖像用於這一目的。僅使用CSS 2D transform和pseudo-elements的簡單技巧就可以正常工作，並且這兩個規範在使用中的現代瀏覽器中得到廣泛支持。

您需要爲您的標記唯一的修改是包的鏈接文字中附加<span>元素，適當的z-index的疊加工作。

用這一招唯一要注意的是，當你應用傾斜，歪斜的僞元素的部分將突出父元素的邊框。此突出部分取決於傾斜角度和鏈接的高度，但可以通過在<ul>元素上設置左側和右側填充物來解決，以確保它們不會溢出。

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>

來源

2017-04-12 06:48:25 Terry

純CSS的解決方案，應該工作在所有主要的瀏覽器包括IE> = 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); 
}

來源

2017-04-12 06:47:30

如何在長菜單中重複切片圖像的中間部分？

回答

相關問題