Блог

Главная - Вопросы по программированию - цвет фона css не отображается

цвет фона css не отображается

#css #html

#css #HTML

Вопрос:

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

По сути, я пытаюсь получить градиентный цвет фона, который я поместил в основной элемент, но он не отображается. Это выглядит так:

 main
/*background-image:url(pics/bg.jpg);    background-repeat:repeat-y; background-color:#FFAA00;*/

#grad {
  background: -webkit-linear-gradient(left, #FFF, #F80);   /*   For Safari  5.1 to  6.0 */
  background: -o-linear-gradient(right, #FFF, #F80);   /*   For Opera   11.1    to  12.0    */
  background: -moz-linear-gradient(right, #FFF, #F80);   /* For Firefox 3.6 to  15  */
  background: linear-gradient(to right, #FFF, #F80);   /*   Standard    syntax  */
}

Но даже если я только поставлю лайк main {background-color: blue;} , фон все равно будет белым. Была бы рада помощи!

Комментарии:

1. Есть ли у вас что-нибудь внутри этого элемента? Я предполагаю, что элемент имеет высоту 0. попробуйте добавить: высота: 200 пикселей; ширина: 200 пикселей; отображение: блок;

2. пожалуйста, укажите свой HTML и CSS

3. Возможно, вы хотели опубликовать HTML и CSS в JSFiddle? Это может помочь нам точно увидеть, что происходит, и лучше помочь. jsfiddle.net

4. Кроме того, вы используете grad в качестве селектора, grad не является элементом html, поэтому вам, вероятно, нужен .grad или #grad , в зависимости от того, класс это или идентификатор

5. @Pete <main> является допустимым элементом HTML5 .

Ответ №1:

работает для меня, просто убедитесь, что вы правильно назвали теги, которые вы стилизуете (и они имеют высоту, как и другие упомянутые):

 body {
  background-image:url(pics/bg.jpg); 
  background-repeat:repeat-y; 
  background-color:#FFAA00;
}
  
#grad {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background:-webkit-linear-gradient(left, #FFF,#F80); 
  /* For Safari 5.1 to 6.0 */
 }
   
 <div id="grad"></div>
Метки: