Возможно ли, чтобы фоновое изображение не отображалось в определенном элементе?

Question

Возможно ли, чтобы фоновое изображение не отображалось в определенном элементе?

0

Пример. Если у меня есть три div внутри div, у которых есть фоновое изображение, внутри <body> который имеет фоновое изображение. Есть ли способ показать фоновое изображение <body> (BodyBackground.jpg) вместо фонового изображения <div> (DivBackground.jpg) в центре div?

<body style="background-image:url('/Content/Images/BodyBackground.jpg'); background-repeat:repeat-y;">
   <div style="background-image:url('/Content/Images/DivBackground.jpg')">
      <div style="height:100px;width:200px"></div>
      <div style="height:100px;width:200px"> SHOW BodyBackground.jpg IMAGE HERE </div>
      <div style="height:100px;width:200px"></div>
   </div>
</body>

A Bogus 14 март 2014, в 08:53

Источник

0

Можете ли вы установить цвет фона для среднего div чтобы наложить родительский?
Ming 14 март 2014, в 07:52
0

Нет, я не могу Спасибо, Сетек. У меня на самом деле будет два фоновых изображения. Один для всего тела, один для большого div.
A Bogus 14 март 2014, в 07:53
0

Помогает ли <div style = "height: 100px; ширина: 200px; цвет фона: белый;"> ... </ div>?
jeff 14 март 2014, в 07:57

Показать ещё 1 комментарий

Теги:

html

css

3 ответа

0

Вы можете создать класс CSS, который определяет фоновое изображение. А затем используйте класс CSS соответственно?

Например.

.body-bg{
    Background-image:url(...);
}
.div-bg{
    Background-image:url(...);
}
body class="body-bg"> 
    div class="div-bg></div>
    div class="body-bg></div>
    div class="div-bg></div>
/body>

Izaaz Yunus 14 март 2014, в 06:49

0

Эй, Юнус, проблема с этим решением заключается в том, что шаблон фонового изображения, вероятно, не будет совпадать.
A Bogus 14 март 2014, в 08:38

0

Попробуй это

 <body style="background-image:url('/Content/Images/BodyBackground.jpg'); background-repeat:repeat-y;">
   <div style="background-image:url('/Content/Images/DivBackground.jpg')">
      <div style="height:100px;width:200px"></div>
      <div style="height:100px;width:200px;background-image:url('/Content/Images/BodyBackground.jpg')!important;"> SHOW BodyBackground.jpg IMAGE HERE </div>
      <div style="height:100px;width:200px"></div>
   </div>
</body>

Chetan Gawai 14 март 2014, в 06:48

0

Спасибо, мисс Четан Гавай. Я также уточнил свой вопрос. Я думаю, что ваш ответ будет работать так, как я изначально задавал вопрос, но я не решу проблему так, как я ее сейчас задавал.
A Bogus 14 март 2014, в 08:10
0

проверить отредактированный ответ
Chetan Gawai 14 март 2014, в 08:16
0

Проблема с этим решением заключается в том, что шаблон фонового изображения, вероятно, не будет совпадать.
A Bogus 14 март 2014, в 08:37

Показать ещё 1 комментарий

Ещё вопросы

Можете ли вы установить цвет фона для среднего div чтобы наложить родительский?
Нет, я не могу Спасибо, Сетек. У меня на самом деле будет два фоновых изображения. Один для всего тела, один для большого div.
Помогает ли <div style = "height: 100px; ширина: 200px; цвет фона: белый;"> ... </ div>?
Эй, Юнус, проблема с этим решением заключается в том, что шаблон фонового изображения, вероятно, не будет совпадать.
Спасибо, мисс Четан Гавай. Я также уточнил свой вопрос. Я думаю, что ваш ответ будет работать так, как я изначально задавал вопрос, но я не решу проблему так, как я ее сейчас задавал.
проверить отредактированный ответ
Проблема с этим решением заключается в том, что шаблон фонового изображения, вероятно, не будет совпадать.

Gil · Accepted Answer · 2014-03-14T05-41-00.000Z

Вы можете сделать его похожим на fixed положение.

HTML:

<body style="background:url('/Content/Images/BodyBackground.jpg') repeat-y;">
    <div style="background-image:url('/Content/Images/DivBackground.jpg')">
        <div style="height:100px;width:200px"></div>
        <div style="height:100px;width:200px;background:url('/Content/Images/BodyBackground.jpg') fixed;"> 
            SHOW BodyBackground.jpg IMAGE HERE
        </div>
        <div style="height:100px;width:200px"></div>
    </div>
</body>

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