фоновое изображение элемента не будет отображаться - PullRequest
Новая
       28

фоновое изображение элемента не будет отображаться

0 голосов
/ 14 февраля 2012

Я пытаюсь создать блочную цитату, как на картинке ниже:

http://www.norrislakevillas.com/images/block-quote-sample.png

Кавычки расположены в правом нижнем углу прозрачного изображения PNG размером 50 x 45 пикселей с интервалом 10 пикселей сверху и слева.

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

Код CSS: 

#block_quote{
   float:left;
   width:400px;
   background:#f7f7f7;
   background-image:url(images/quote-top.png) left top no-repeat;
   margin:50px 0 100px 53px;
   border:1px solid #ccc;
}

#block_quote p{
   font:italic 14px segoe ui, arial, sans-serif;
   color:#5f5f5f;
   line-height:1.4em;
   margin:0;
   padding:20px 15px 20px 60px;
}

Есть идеи, почему изображение не отображается?

Спасибо

Ответы [ 2 ]

0 голосов
/ 14 февраля 2012

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

Так что не путайте background и отдельные свойства фона, такие как background-image. Это должно быть либо 

background:#f7f7f7 url(images/quote-top.png) no-repeat left top;

или 

background-color:#f7f7f7;
background-image:url(images/quote-top.png);
background-repeat:no-repeat;
background-position:left top;

но ни одной из них; это запутает браузер.

0 голосов
/ 14 февраля 2012

Ваш путь изображения должен быть относительно файла CSS. Кроме того, это просто фон, а не background-image, если вы используете все объявления в одной строке, а порядок в конце - no-repeat top left.

background: url (images / quote-top.png) без повтора вверху слева;

...