CSS Цвет фона Не отображается

У меня есть страница HTML5, и изображение перечеркивает цвет фона на всей странице. Я пытаюсь сделать изображение отображаемым в фоновом режиме, в то время как цвет фона отображается на странице, расположенной поверх фона. Скопируйте и вставьте мой код, чтобы убедиться сами. Как это исправить? Заранее спасибо.CSS Цвет фона Не отображается

Это индексный файл:

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <link rel="stylesheet" href="javajam.css"> 
    <title>JavaJam Coffee House</title> 
    <meta charset="utf-8"> 
    <link rel="icon" href="favicon.ico" type="image/x-icon"> 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 
</head> 

<body> 
<div id="wrapper"> 

<h1><img src="javalogo.gif" alt="JavaJam Logo" width="619" height="117"></h1> 

<div id="nav"> 
    <a href="index.html">Home</a>&nbsp; 
    <a href="menu.html">Menu</a>&nbsp; 
    <a href="music.html">Music</a>&nbsp; 
    <a href="jobs.html">Jobs</a> 
</div> 

<div id="content"> 

<img src="windingroad.jpg" alt="Winding Road" width="333" height="156" align="right"> 

<ul> 
    <li>Specialty Coffee and Tea</li> 
    <li>Bagels, Muffins, and Organic Snacks</li> 
    <li>Music and Poetry Readings</li> 
    <li>Open Mic Night</li> 
</ul> 

<div> 
    12312 Main Street<br> 
    Mountain Home, CA 93923<br> 
    1-888-555-5555 
</div> 

<br> 
</div> 
<div id="footer"> 
    Copyright &copy; 2013 JavaJam Coffee House<br> 
    <a href="mailto:[email protected]">[email protected]</a> 
</div> 
</div> 
</body> 
</html>

И это CSS:

body { background-color: #FFFFCC; 
     color: #330000; 
     font-family: Verdana, Arial, sans-serif; 
     background-image: url(background.gif); } 

h1 { background-color: #CCAA66; 
    color: #000000; 
    text-align: center; } 

h2 { background-color: #CCAA66; 
    font-size: 1.2em; 
    padding-left: 10px; 
    padding-bottom: 5px; } 

img { border: none; } 

#nav { text-align: center; } 

#footer { background-color: #CCAA66; 
     color: #000000; 
     font-size: .60em; 
     font-style: italic; 
     text-align: center; 
     padding: 10px; } 

#wrapper { background-color: ffffcc; 
      width: 80%; 
      margin-left: auto; 
      margin-right: auto; 
      min-width: 700px; 
      -webkit-box-shadow: 5px 5px 5px #1e1e1e; 
      -moz-box-shadow: 5px 5px 5px #1e1e1e; 
      box-shadow: 5px 5px 5px #1e1e1e; } 

#content { padding: 25px; } 

.details { padding-left: 20%; 
      padding-right: 20%; }

источник

2014-01-04 Zack

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

Я не думаю, что смогу следовать за тобой – Andy

@DamienBlack - Нет, страница должна выглядеть так, как будто это на фоне фона. На правой и нижней части части есть тень, которая должна быть цветом страницы. Изображение должно выглядеть так, как будто оно стоит за всем этим. – Zack

В коде вы предоставили, инспектор Chrome сообщает «ffffcc» как недействительное значение свойства для фона цвета в сНу #wrapper.

Добавление «#» перед «ffffcc» делает допустимым фоновый цвет, что приведет к правильному отображению изображения вместо фонового изображения тела. Извините, если это не устраняет проблему, но на всякий случай стоит попробовать.

источник

2014-01-04 20:37:22

Ницца найти, брат! Это исправило это. – Zack

Спасибо! Я случайно пропустил это немного «#» столько раз. Рад, что это решило! –

Я нашел опечатку в коде. У вас есть:

#wrapper { background-color: FFFFCC; }

Должно быть:

#wrapper { background-color: #FFFFCC; }

источник

2014-01-04 20:37:14 Webars

Большое спасибо! Это исправление. Я, по крайней мере, дал вам одного, поскольку я должен был дать ответ Джеку Б, так как он сказал это первым. Еще раз спасибо. – Zack

Спасибо! Я тоже тебе дал. :) – Webars

CSS Цвет фона Не отображается

ответ

Смежные вопросы