CSS-фоновое изображение не работает

Ответ 1

Добавить "display: block;" в классе .btn-pTool

Ответ 2

Используйте свойство shorthand для свойства background и введите имя папки, в которой было размещено изображение.

.btn-pTool{
    margin:0;
    padding:0;
    background:url("../folder name/slide_button.png") 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; 
}

Ответ 3

Я столкнулся с этой проблемой. Мой html был следующим:

<th style="background-image:url('Image.png');">
</th>

Я добавил "& nbsp", поскольку @shankhan предложил внутри th, и изображение начало отображаться.

<th style="background-image:url('Image.png');">
   &nbsp;
</th>

Ответ 4

В дополнение к display:block OR display:inline-block

Попробуйте предоставить padding достаточно padding для .btn-pToolName и убедиться, что у вас есть правильные значения для background-position

Ответ 5

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

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

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

Ответ 6

 <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).

Ответ 7

Я пробовал ваш код и обнаружил, что если мы поместим 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;
            }

и test html:

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

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

Ответ 8

Вы применили класс "btn-pTool" для span, который является встроенным элементом... дайте display:block ему, а также добавьте текст внутри тега <a> и увидите результат.

Также укажите фоновый цвет и положение фона, а также изображение, хотя исходное положение фона есть.. но попробуйте сделать это таким образом

Ответ 9

Используйте этот, чтобы добавить фон ---

background-image: url('images-path');

Вы также можете добавить в него функцию повтора или без повторения!

background: url('images-path')   no-repeat 00;

Ответ 10

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

Попробуйте добавить display:block в .btn-pTool и задайте ему ширину и высоту.

Также в вашем коде оба tbn-pTool и btn-pToolName не имеют текстового содержимого, поэтому могут не отображаться вообще.

Вы можете попытаться заставить контент в них таким образом

.btn-pTool, .btn-pToolName {
    content: " ";
}

Ответ 11

Ниже приведен код. Замените текст в одинарных кавычках своим именем изображения. Если он находится в той же папке, если не добавить ../foldername/'yourimagename', я надеюсь, что это поможет.

Примечание:

Использование одиночных кавычек большинством программистов не рекомендуется, но я использую его, и он работает. Кроме того, если вы напишете PHP, вам понравится, что он может сделать, то есть автоматически добавить фоновое изображение из переменной и т.д.

<html>
<head>
<style type="text/css">
.btn-pTool{
margin:0;
padding:0;
background-image: url('your name of the field');
height:100px;
width:200px;
display:block;
}

.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; 
    }
    </style>
    </head>
    <body>
    <div class="pToolContainer">
    <span class="btn-pTool"><a class="btn-pToolName" href="#">Test text</a></span>
    <div class="pToolSlidePanel">Test text</div>
    </div>
    </body>
    </html>

Ответ 12

Простым способом является копирование и прохождение этого фонового изображения: url(../slide_button.png); вместо background-image: url(slide_button.png); В этом случае нам нужно использовать../перед дорожкой. Либо вам нужно дать полный путь. Другое дело, что, прежде чем делать какие-либо изменения, просто очистите историю браузера и обновите страницу.

Ответ 13

1.Используйте этот код в таблице стилей

body {
  background: URL("slide_button.png");
  background-size: 100% 100%;
  background-repeat: no repeat;

2.Put img и html файл вместе в одной папке 3.IF не работал, попробовал конвертировать png файл в jpg, чтобы просто загрузить pic на facebook, а затем загрузить этот рисунок из facebook, он будет автоматически преобразован в jpg и при загрузке галочки отметьте личную настройку, чтобы ур друзья не могли увидеть, что изображение 4.if все еще не работает imform me..