CSS: Прозрачный против непрозрачности: 0

Я хотел установить весь фон моей страницы на изображение. Я установил html-фон следующим кодом. Я заметил, что фон тела все еще установлен на белый. Я попробовал «Непрозрачность: 0;» но это сделало каждый элемент в теле «Непрозрачность: 0;» (это было не то, что мне было нужно). Я перепробовал фон: прозрачный», и это, кажется, работает Но я не понимаю разницу между непрозрачностью: 0 и Transparent Может кто-нибудь объяснить в неспециалиста терминахCSS: Прозрачный против непрозрачности: 0

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css); 
 

 
html{ 
 
    background:url('https://stocksnap.io/img-thumbs/960w/22629E3D46.jpg') no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
} 
 

 
body{ 
 
    padding-top: 50px; 
 
    background:transparent; 
 
} 
 

 
.header{ 
 
    background-color: white; 
 
} 
 

 
.body{ 
 
} 
 

 
.box{ 
 
    border-radius: 3px; 
 
    box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 
 
    padding:10px 25px; 
 
    text-align: right; 
 
    display: block; 
 
    margin-top: 60px; 
 
    background-color: white; 
 
    opacity: .8; 
 
    transition: all 0.5s ease 0s; 
 
} 
 

 
.popup{ 
 
    background-color: blue; 
 
} 
 

 
.box:hover{ 
 
    opacity: .9; 
 
    transition: all 0.5s ease 0s; 
 
} 
 

 
.box-icon{ 
 
    background-color:#57a544; 
 
    border-radius: 50%; 
 
    display: table; 
 
    height:100px; 
 
    width:100px; 
 
    margin:0 auto; 
 
    margin-top:-61px; 
 
} 
 

 
.box-icon span{ 
 
    color:#fff; 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
.info h4{ 
 
    font-size: 26px; 
 
    letter-spacing: 2px; 
 
    text-transform: uppercase; 
 
} 
 

 
.info p{ 
 
    color: 
 
    font-size: 16px; 
 
    padding-top: 10px; 
 
    text-align: justify; 
 
} 
 

 
.info a{ 
 
    background-color: #03a9f4; 
 
    border:2px; 
 
    box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 
 
    color:#fff; 
 
    transition: all 0.5s ease 0s; 
 
} 
 

 
.info a:hover{ 
 
    background-color: #0288d1; 
 
    box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.16), 0 2px 5px 0 rgba(0, 0, 0, 0.12); 
 
    color: #fff; 
 
    transition:all 0.5s ease 0s; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.2/css/font-awesome.min.css'> 
 
    <link rel="shortcut icon" type="image/png" href="favicon/favicon-nav-logo.ico"/> 
 

 
</head> 
 
<body> 
 
    <div class="container"> 
 
     <div class="row body"> 
 
      <div class="col-xs-12 col-sm-6 col-lg-6"> 
 
       <div class="box"> 
 
        <div class="info"> 
 
         <h4 class="text-center">Title</h4> 
 
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim omnis veritatis quia labore quas eveniet nesciunt dolorum, totam quibusdam aspernatur dignissimos consectetur illum vero, suscipit, beatae accusantium quis perspiciatis natus.</p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      
 
     </div> 
 
    </div> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
</body> 
 
</html>

термины..? ?

источник

2015-01-31 Anonymous

Почему вы не установить фон непосредственно body? jsBin demo

html, body{ 
    height:100%; 
    margin:0; 
} 

body{ 
    padding-top: 50px; 
    background: url('image.jpg') fixed 50%/cover; 
}

Непрозрачность не имеет отношения к Фон, но к состоянию непрозрачности элемента.
background: transparent; - прозрачный фон.

Установка элемента в opacity:0; заставит детей «исчезать», поскольку атрибут был установлен в родительский.

источник

2015-01-31 18:46:21

Это имеет смысл. Спасибо за ответ. –

CSS: Прозрачный против непрозрачности: 0

ответ

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