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

Question

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

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.

Answer 1

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

Answer 2

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

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

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

Answer 3

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

Answer 4

Я пробовал код и нашел это, положив 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> 

Надеется, что это помогает.

Answer 5

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

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

Answer 6

Вы применили класс «БТН-pTool», чтобы охватить что встроенный элемент ... дайте display:block, а также добавьте текст внутри тега <a> и посмотрите результат.

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

Answer 7

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

.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; 
} 

Answer 8

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

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

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

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

Answer 9

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

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

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

Вы можете попытаться заставить прийти содержание в них этот путь

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

Answer 10

Код ниже работ. Замените текст в одиночных кавычек с вашим изображением. Если он находится в той же папке, если нет, добавьте ../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> 

Answer 11

Я столкнулся с этой проблемой. Мой HTML был, как показано ниже:

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

Я добавил «& NBSP», как @shankhan предложил внутри-й и образ начал показ.

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

Answer 12

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

Answer 13

1.Use этот код в таблице стилей

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

2.Put IMG и HTML-файл вместе в одной папке 3.IF не работала попытка преобразования PNG файл в формате JPG для этого просто загрузить ПИК на Facebook, а затем скачайте, что pic из facebook автоматически преобразуется в jpg, и при загрузке галочки отметьте частные настройки, чтобы ур друзья не могли видеть, что изображение 4.if все еще не работает imform me ..