Как переопределить фоновое изображение, определенное в CSS, другим CSS? - PullRequest
Новая
       1

Как переопределить фоновое изображение, определенное в CSS, другим CSS?

24 голосов
/ 26 января 2011

У меня есть «Core.css», который определяет фоновое изображение страницы, а также тему для сайта.Но для конкретной страницы я хочу изменить только фон.Любые предложения о том, как этого можно достичь в отдельном файле CSS?

HTML-код страницы: 

<head>
    <link rel="stylesheet" type="text/css" href="core.css" />
    <link rel="stylesheet" type="text/css" href="index.css" />

И core.css определяет: 

body
{
        background-image: url('bg.png');
}

Пока index.css определяет: 

body
{
    background-image:('homeBg.png');
}

Спасибо!

Ответы [ 7 ]

49 голосов
/ 22 января 2013

Если вы хотите заменить фоновое изображение ничем (например, сделать его неактивным или «выключить его»), используйте ключевое слово none в вашей следующей таблице стилей: 

 background-image: none;
13 голосов
/ 26 января 2011

заданный позже фон должен заменить предыдущие.Так что если у вас есть:

Site1.css с: 

.img {
    background: ...
}

Site2.css с: 

.img {
    background: ...
}

, то Site2.css .img заменит.img в Site1.css, если Site2.css включен после Site1.css на вашей странице.

ОБНОВЛЕНИЕ: Я не уверен, почему тег body заменяется неправильно.Не могли бы вы попытаться присвоить ему класс или идентификатор и использовать его вместо тела?

например 

<body id="backgroundTest">

А затем в файлах css вы бы сделали #backgroundTest { background-image... }

И на всякий случай, не могли бы вы проверить, существует ли homeBg.png и index.css.http://yourpage.com/homeBg.png и http://yourpage.com/index.css должны существовать.

4 голосов
/ 26 января 2011

Для конкретной страницы вы можете использовать правило css на странице, используя !important.Если вы добавите your-selector {background: url("the-path-for-the-bg-image") no-repeat !important;} в файл, переопределит фон по умолчанию.

1 голос
/ 26 января 2011

Либо установите фон в правиле CSS с тем же селектором, что и в исходном правиле, и добавьте новый CSS-файл после исходного, либо убедитесь, что в новом правиле есть селектор с более высокой специфичностью: http://www.w3.org/TR/CSS2/cascade.html#specificity

Наконец, вы можете присвоить свойству background флаг !important, однако это обычно последнее средство и признак плохо организованной таблицы стилей.

0 голосов
/ 27 января 2013

в index.css записать 

 body { background-image:('homeBg.png') !important;

Вы можете переопределить любое свойство, определенное в любом месте, написав "! Важное" после него в новом файле

0 голосов
/ 14 июля 2011

У меня была такая же проблема.

То, что я закончил, было в моей таблице стилей, которая выполняла переопределение, я применил это не только к телу, html:

Итак ... 

#id, html, body { background-color: #FFF }

Надеюсь, это кому-нибудь поможет.

0 голосов
/ 26 января 2011

Если фон страницы установлен в теле, вы можете просто отменить его, присвоив телу на этой конкретной странице класс или идентификатор и добавить (также может быть в том же файле CSS ...): 

body.someClass {
  background: ...
}

или 

body#someID {
  background: ...
}

(в обеих частях body на самом деле не требуется, поскольку класс и идентификатор отменяют селектор)

...