CSS background-image не работает - PullRequest
Новая
       1

CSS background-image не работает

14 голосов
/ 01 февраля 2011

Я не знаю, что происходит, но кажется, что фоновое изображение не загружается.

test.html: 

<div class="pToolContainer">
     <span class="btn-pTool">
         <a class="btn-pToolName" href="#"></a>
     </span>
     <div class="pToolSlidePanel"></div>
</div>

style.css: 

    .btn-pTool{
    margin:0;
    padding:0;
    background-image: url(slide_button.png);
    background-repeat:no-repeat;
    }

    .btn-pToolName{
        text-align: center; 
        width: 26px; 
        height: 190px; 
        display: block; 
        color: #fff; 
        text-decoration: none;  
        font-family: Arial, Helvetica, sans-serif;  
        font-weight: bold; 
        font-size: 1em; 
        line-height: 32px; 
    }

Кстати, изображение существует в папке test.html.

Ответы [ 13 ]

0 голосов
/ 01 февраля 2011

Я попробовал ваш код и обнаружил, что если мы введем background-image: url(image.png); в btn-pToolName и изменим color:#000000.оно отображает изображение в фоновом режиме.

мой тестовый css: 

           .btn-pTool {
                margin: 0;
                padding: 0;
            }

            .btn-pToolName {
                text-align: center;
                width: 26px;
                height: 190px;
                display: block;
                color: #000000;
                text-decoration: none;
                font-family: Arial, Helvetica, sans-serif;
                font-weight: bold;
                font-size: 1em;
                line-height: 32px;
                background-image: url(defalut.png);
                background-repeat: no-repeat;
            }

и тестовый html: 

        <div class="pToolContainer">
            <span class="btn-pTool"><a class="btn-pToolName" href="#">adad</a></span>
            <div class="pToolSlidePanel"></div>
        </div>

Надеюсь, это поможет.

0 голосов
/ 01 февраля 2011 
 <span class="btn-pTool">
 <a class="btn-pToolName" href="#"></a>
 </span>

Это пусто.Попробуйте добавить неразрывный пробел, чтобы дать ссылку и охват некоторого содержимого: 

 <span class="btn-pTool">
 <a class="btn-pToolName" href="#">&nbsp;</a>
 </span>

Стоит также отметить, что в спецификации CSS сказано, что нельзя дать фону изображение диапазона, потому что отрезки не являются блочными элементами,Поместите код фонового изображения в стиль класса div или используйте <p> instead of <span>.Некоторые браузеры могут позволить вам поместить фон в промежуток, но не все будут (возможно, более старые версии IE).

0 голосов
/ 01 февраля 2011

@ TheBigO, это не правильно. Пролеты могут иметь фон / изображения (проверено в IE8 и Chrome для проверки работоспособности).

Проблема в том, что a.btn-pToolName помечено как display: block. Это приводит к тому, что браузеры webkit больше не отображают фон во внешнем диапазоне. Похоже, IE отображает его так, как хочет OP.

OP дает возможность отображать класс .btn-pTool: inline-block, чтобы он работал как гибрид span / div (возьмите фон, но не вызовите разрыв в макете).

Страница:
...