導航欄下增加重複圖像

我試圖重現一個頭，看起來類似這樣：導航欄下增加重複圖像

但我似乎無法能夠創建重複的菱形圖案在黑色欄下。菱形圖案看起來是這樣的：

這是我目前已經寫在HTML和CSS，這只是一個測試版本現在

figure { 
 
     background: black; 
 
     border-radius: 3px; 
 
     height: 50px; 
 
     margin: 0px; 
 
    } 
 
    html { 
 
     background-color: grey; 
 
     width: 1212px; 
 
     height: 1476px; 
 
     margin: auto; 
 
    } 
 
    img { 
 
     border-radius: 100%; 
 
     position: relative; 
 
     vertical-align: middle; 
 
     left: 50px; 
 
     bottom: 30px; 
 
    } 
 
    figcaption { 
 
     display: inline-block; 
 
     vertical-align: middle; 
 
    } 
 
    li { 
 
     display: inline-block; 
 
     text-decoration: none; 
 
     overflow: hidden; 
 
     margin-bottom: 50px; 
 
    } 
 
    a { 
 
     list-style: none; 
 
     text-decoration: none; 
 
     text-align: center; 
 
     color: white; 
 
    } 
 
    ul:first-child { 
 
     float: left; 
 
     margin-left: 100px; 
 
    } 
 
    ul:last-child { 
 
     float: right; 
 
     margin-left: 550px; 
 
    } 
 
    div { 
 
     background-color: blue; 
 
     width: 100%; 
 
     height: 70px; 
 
    }

<div></div> 
 
<figure> 
 
    <img width="100" height="100" src="http://i.imgur.com/HiCMdId.png" /> 
 
    <figcaption> 
 
    <ul> 
 
     <li> 
 
     <a href="">test</a> 
 
     <a href="">test</a> 
 
     </li> 
 
    </ul> 
 
    <ul> 
 
     <li><a href="">test</a> 
 
     </li> 
 
     <li><a href="">test</a> 
 
     </li> 
 
     <li><a href="">test</a> 
 
     </li> 
 
     <li><a href="">test</a> 
 
     </li> 
 
    </ul> 
 
    </figcaption> 
 
</figure>

來源

2016-04-24 Gilbert Boner

有沒有你想要它有什麼特別的原因？我問，因爲現在看起來它對我來說看起來沒問題。我覺得你的鑽石圖案會對設計產生一些影響觀衆的不愉快感。 – Jhecht

沒有理由，我只是想弄清楚如何做到這一點，以獲得更多的HTML/CSS的熟悉。 –

這是我得到了什麼。我正在使用一個名爲::after的僞元素。請注意，因爲figure上沒有課程，所以如果您在頁面上製作了其他figure標籤，則除非您覆蓋樣式，否則它們也會具有該背景。

figure { 
 
    background: black; 
 
    border-radius: 3px; 
 
    height: 50px; 
 
    margin: 0px; 
 
    position: relative; 
 
} 
 
figure::after { 
 
    content: ' s'; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    right: 0; 
 
    background: url(http://i.stack.imgur.com/bisH4.png) repeat-x 0 0; 
 
    z-index: -1; 
 
    display: block; 
 
    color: transparent; 
 
    background-size: 10px 10px; 
 
} 
 
html { 
 
    background-color: grey; 
 
    width: 1212px; 
 
    height: 1476px; 
 
    margin: auto; 
 
} 
 
img { 
 
    border-radius: 100%; 
 
    position: relative; 
 
    vertical-align: middle; 
 
    left: 50px; 
 
    bottom: 30px; 
 
} 
 
figcaption { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
li { 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    overflow: hidden; 
 
    margin-bottom: 50px; 
 
} 
 
a { 
 
    list-style: none; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    color: white; 
 
} 
 
ul:first-child { 
 
    float: left; 
 
    margin-left: 100px; 
 
} 
 
ul:last-child { 
 
    float: right; 
 
    margin-left: 550px; 
 
} 
 
div { 
 
    background-color: blue; 
 
    width: 100%; 
 
    height: 70px; 
 
}

<div></div> 
 
<figure> 
 
    <img width="100" height="100" src="http://i.imgur.com/HiCMdId.png" /> 
 
    <figcaption> 
 
    <ul> 
 
     <li> 
 
     <a href="">test</a> 
 
     <a href="">test</a> 
 
     </li> 
 
    </ul> 
 
    <ul> 
 
     <li><a href="">test</a> 
 
     </li> 
 
     <li><a href="">test</a> 
 
     </li> 
 
     <li><a href="">test</a> 
 
     </li> 
 
     <li><a href="">test</a> 
 
     </li> 
 
    </ul> 
 

 
    </figcaption> 
 
</figure>

來源

2016-04-24 00:44:47 Jhecht

正是我想看到的，謝謝。 –

你應該把圖像作爲跨越整個菜單寬度的div的背景。您可以從HTML中刪除圖像src。

所以你的CSS將類似於此：

figure{ 
    background-image: url('http://i.imgur.com/HiCMdId.png'); 
    background-repeat: background-repeat: repeat-x; 
    width: 100%; 
}

來源

2016-04-24 00:37:39

導航欄下增加重複圖像

回答

相關問題