Перекрывая текст поверх фонового изображения

Question

Я использую Bootstrap, и я хочу иметь фоновое изображение и над ним текст, изображения или что-то еще. Проблема в Bootstrap CSS отображает элементы с каким-то фоном и, разумеется, разрушает результат.

Вы можете посмотреть пример with Bootstrap here и without bootstrap here.

Как я могу удалить эту загрузочную загрузку по умолчанию?

Код:

HTML

<center><div> 
    <h1>This is a test</h1> 
</div></center> 

CSS

html { 
    width: 100%; 
    height: 100%; 
    background: url('http://static.panoramio.com/photos/original/24446619.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    filter: opacity(0.9); 
    -webkit-filter: opacity(0.9); 
    -moz-filter: opacity(0.9); 
    -o-filter: opacity(0.9); 
} 

Answer 1

Bootstrap устанавливает CSS тела следующим образом в течение первых нескольких строк кода body { background-color: #fff; }. Моя рекомендация для этого - зайти в ваш файл bootstrap.css и удалить этот css.

Если вы используете CDN, вы можете добавить следующее после того, как ваш <link> к начальной загрузке CSS:

<style> 
    body { background-color: inherit; } 
</style> 

это перекроет самозагрузку CSS загружен.

См. Мое обновление к вашей скрипке здесь: http://jsfiddle.net/1Ldykff2/2/

Answer 2

Там это правило CSS на body вашего HTML, который используется при загрузке, что дает background-color: #fff;

В вашем собственном CSS, вы могли бы поставить

body { 
    background-color: none; 
} 

Это аннулирует код начальной загрузки в.

Answer 3

Попробуйте установить цвет фона на transparent. (Вы можете использовать none, но я нашел, что это может быть хлопотно иногда не совсем уверен, почему.).

Fiddle: http://jsfiddle.net/1Ldykff2/3/

body { 
    background: transparent; 
}