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

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 ]

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

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

4 голосов
/ 18 января 2013

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

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

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

<th style="background-image:url('Image.png');">
   &nbsp;
</th>
4 голосов
/ 01 февраля 2011

Используйте сокращенное свойство для свойства 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; 
}
1 голос
/ 01 февраля 2011

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

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

0 голосов
/ 03 июля 2015

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

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

2.Сложить IMG и HTML-файл вместе в одной папке 3. Если не сработало, попробуйте конвертировать png файл в jpg, для этого просто загрузите изображение на Facebook, а затем загрузите это изображение с Facebook, оно автоматически преобразуется в jpg и при загрузке частной настройки отметки, чтобы ваши друзья не могли просмотреть это изображение. 4.Если все еще не работает, имформируй меня ..

0 голосов
/ 24 июня 2014

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

0 голосов
/ 11 августа 2011

Код ниже работает.Замените текст в одинарных кавычках именем вашего изображения.Если он находится в той же папке, если нет, добавьте .. / 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>
0 голосов
/ 24 июня 2011 
<span class="btn-pTool">
         <a class="btn-pToolName" href="#"></a>
     </span>

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

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

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

.btn-pTool, .btn-pToolName {
    content: " ";
}
0 голосов
/ 20 февраля 2011

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

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

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

background: url('images-path')   no-repeat 00;
0 голосов
/ 01 февраля 2011

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

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

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