Создание div прозрачным и отображение фонового изображения

Я хочу сделать div прозрачным таким образом, чтобы через него можно было видеть фоновое изображение. Кажется, что все онлайн-учебники работают, но похоже, что мне не хватает деталей в проекте.Создание div прозрачным и отображение фонового изображения

CSS:

html { 
    background: url('../images/background.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

div.container-fluid{ 
    /*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";   */ 
    /*filter: alpha(opacity=0); */ 
    /*-moz-opacity: 0.0;   */ 
    /*-khtml-opacity: 0.0;   */ 
    /*opacity: 0.0;    */ 
    /*background: rgba(255,255,255,0);*/ 
    background-color: transparent !important; 
    color: #ffffff; 
    opacity: 0.2; 
}

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>M</title> 
    <meta charset="utf-8" /> 
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content="Cue"/> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/main.css" media="screen" /> 
</head> 

<body> 
    <div class="container-fluid"> 
     <div class="header"> 
      <a href="" class="header-text">M</a> 
      <h1>M</h1> 
     </div> 
     <div class="content"> 
      <main> 

      </main> 
     </div> 
    </div> 
</body> 
</html>

источник

2015-03-30 Mindaugas Bernatavičius

Ваш код работает для меня. Можете ли вы уточнить, что не работает? – Matt

Потому что в загрузчике есть тело background:#fff;, вы можете добавить фон тела: прозрачный;

источник

2015-03-30 21:08:05

Это действительно так - кажется, не очень интуитивно. Почему так делается? :) –

Лучше, если вы дадите фон с изображением на тело или на какой-нибудь div, а не на html. –

Да, я тоже это сделал :) Спасибо –

Ваш код, кажется, работает (см демо) - я добавил красный-границу на H1 для справки. Может, я неправильно понял вашу проблему?

Bootstrap имеет собственные настройки цвета фона. Вы можете переопределить их, если собираетесь использовать его.

html { 
 
    background: url('http://placekitten.com/g/500/500') no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
div.container-fluid{ 
 
    /*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";   */ 
 
    /*filter: alpha(opacity=0); */ 
 
    /*-moz-opacity: 0.0;   */ 
 
    /*-khtml-opacity: 0.0;   */ 
 
    /*opacity: 0.0;    */ 
 
    /*background: rgba(255,255,255,0);*/ 
 
    background-color: transparent !important; 
 
    color: #fff; 
 
    opacity: 0.5; 
 
    border: 3px solid red; 
 
}

<div class="container-fluid"> 
 
     <div class="header"> 
 
      <a href="" class="header-text">M</a> 
 
      <h1>M</h1> 
 
     </div> 
 
     <div class="content"> 
 
      <main> 
 

 
      </main> 
 
     </div> 
 
    </div>

источник

2015-03-30 21:06:35 ochi

Создание div прозрачным и отображение фонового изображения

ответ

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