爲什麼圖標在重複？

-2

我試圖在菜單欄中使用圖標作爲項目，但是當顯示大於1366x768時，它開始重複。這裏是圖片是什麼樣子：爲什麼圖標在重複？

下面是HTML & CSS：

.topheader__menu { 
 
    float: right; 
 
    font-size: 5vh; 
 
    font-weight: bold; 
 
    color: rgb(255, 255, 255); 
 
    position: relative; 
 
    top: 50%; 
 
    -webkit-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
    margin-left: 3vmin; 
 
    margin-right: 3vmin; 
 
    font-family: Arial; 
 
} 
 
.topheader__menu a { 
 
    text-decoration: none; 
 
} 
 
.topheader__menu__item { 
 
    float: left; 
 
    margin-left: 2ch; 
 
    margin-right: 2ch; 
 
} 
 
.nav_1 { 
 
    background: url(../img/nav-menu/home_bl.png); 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-repeat: no-repeat; 
 
} 
 
.nav_1:hover { 
 
    background: url(../img/nav-menu/home_wh.png); 
 
}

<div class="topheader__menu"> 
 
    <a class="topheader__menu__item nav_1" href="#">&nbsp</a> 
 
    <a class="topheader__menu__item nav_2" id="current" href="#">About</a> 
 
    <a class="topheader__menu__item nav_3" href="#">Technical</a> 
 
    <a class="topheader__menu__item nav_4" href="#">Products</a> 
 
</div>

我應該怎麼做，如果顯示比1366x768的大它不重複？

來源

2016-06-23 sheia

放了background-repeat：不重複，以.nav_1 –

的圖像重複，當你將鼠標懸停在圖片..？ – user2584538

你可以給我你的網站鏈接，所以我會檢查它 –

換成y我們的CSS寬度這段代碼

.nav_1 { 
    background:url(../img/nav-menu/home_bl.png); 
    display: block; 
    width: 16px; //image width 
    height: 16px; //image height 
    background-repeat: no-repeat; 
} 
.nav_1:hover { 
    background:url(../img/nav-menu/home_wh.png); 
    width: 16px; //image width 
    height: 16px; //image height 
}

來源

2016-06-23 10:24:14

-1

把下面的代碼

.nav_1 { 
background: url(../img/nav-menu/home_bl.png) no-repeat; 
display: block; 
width: 100%;} 

.nav_1:hover { 
background: url(../img/nav-menu/home_wh.png) no-repeat; 
}

或

.nav_1 { 
background: url(../img/nav-menu/home_bl.png); 
background-repeat:no-repeat; 
display: block; 
width: 100%;} 

    .nav_1:hover { 
background: url(../img/nav-menu/home_wh.png); 
background-repeat:no-repeat; 
}

來源

2016-06-23 10:00:56

它仍然重複 – sheia

請把工作小提琴或片段 –

而不是僅僅使用background使用background-image並添加background-repeat:no-repeat到懸停狀態也這樣

.nav_1 { 
background-image: url(../img/nav-menu/home_bl.png); 
display: block; 
width: 100%; 
height: 100%; 
background-repeat: no-repeat; 
} 
.nav_1:hover { 
background-image: url(../img/nav-menu/home_wh.png); 
background-repeat: no-repeat; 
}

來源

2016-06-23 10:07:22

爲什麼圖標在重複？

回答

相關問題