Button background image not show

Я создаю кнопки с фоном для навигационной системы. Удручает то, что все фоновые изображения правильно отображаются в тестовом браузере CODA, поэтому я знаю, что пути к файлам верны, но они вообще не отображаются в Chrome/Firefox/Safari. Если у кого-нибудь есть какие-либо советы, которые они могут предложить, я бы очень признателен.Button background image not show

Ссылка на тест-сайте: http://parkerrichard.com/new/index.html

HTML

<nav class="centered" role="navigation"> 
    <div class="container"> 
     <div class="centered"> 
      <ul> 
       <li> 
        <a href="#"><button class="design"></button></a> 
       </li> 
       <li> 
        <a href="#"><button class="photo"></button></a> 
       </li> 
       <li> 
        <a href="#"><button class="music"></button></a> 
       </li> 
       <li> 
        <a href="#"><button class="art"></button></a> 
       </li> 
       <li> 
        <a href="#"><button class="parker"></button></a> 
       </li> 
      </ul> 
     </div> 
     <ul class="nav-glyphs"> 
      <li> 
       <a href="#"><span class="glyphicon glyphicon-cog"></span></a> 
      </li> 
      <li> 
       <a href="#"><span class="glyphicon glyphicon-camera"></span></a> 
      </li> 
      <li> 
       <a href="#"><span class="glyphicon glyphicon-music"></span></a> 
      </li> 
      <li> 
       <a href="#"><span class="glyphicon glyphicon-pencil"></span></a> 
      </li> 
     </ul> 
     <ul class="nav-words"> 
      <li> 
       <a href="#">ART</span></a> 
      </li> 
      <li> 
       <a href="#">MUSIC</span></a> 
      </li> 
      <li> 
       <a href="#">PHOTO</span></a> 
      </li> 
      <li> 
       <a href="#">DESIGN</span></a> 
      </li> 
     </ul> 

    </div><!--/container --> 
</nav><!--/navbar -->

CSS

nav button { 
    border-radius:50%; 
    position: absolute; 
    opacity: 50% !important; 
    left: 50%; 
    right: 50%; 
} 

.parker { 
    margin-top: 200px; 
    margin-left: -100px; 
    width: 200px; 
    height: 200px; 
    background: transparent url('img/parker.jpg'); 
    background-size: 100%; 
    opacity: 1 !important; 
    cursor: hand; 
} 

.art { 
    margin-top: 150px; 
    margin-left: -150px; 
    width: 300px; 
    height: 300px; 
    background: transparent url('img/art.jpg'); 
} 

.music { 
    margin-top: 100px; 
    margin-left: -200px; 
    width: 400px; 
    height: 400px; 
    background: transparent url('img/music.jpg'); 
} 

.photo { 
    margin-top: 50px; 
    margin-left: -250px; 
    width: 500px; 
    height: 500px; 
    background: transparent url('img/photo.jpg'); 
} 

.design { 
    margin-left: -300px; 
    width: 600px; 
    height: 600px; 
    background: transparent url('img/design.jpg'); 
}

источник

2015-03-11 Parker Richard

сделали вы проверили URL-адрес пути к фоновому изображению? когда я использую элемент проверки im, получая mgs как «не удалось загрузить данный URL» –

Выглядит хорошо для меня – cameronjonesweb

Но его работы отлично подходят для меня в firefox и chrome. – nikesh

Вместо стенографии попробовать явно устанавливая значения

Ex:

background-color: transparent; 
background-image: url(...);

источник

2015-03-11 05:42:22 GouravR

в конечном итоге оказалось ошибкой в пути к файлу, стенографические работы –

Глупые ошибки! Фоновые изображения просто нужен был «../» перед каждым URL (я забыл свой CSS был в своей папке в корневом каталоге)

источник

2015-03-11 05:47:40

Добавить значение непрозрачности для всех классов кнопки

.art, .parker, .music, .photo, .design { 
opacity:0.5; 
}

источник

2015-03-11 05:53:09 nikesh

Button background image not show

ответ

Смежные вопросы