CSS : 투명 대 불투명도 : 0

내 페이지의 전체 배경을 이미지로 설정하고 싶습니다. 다음 코드로 html 배경을 설정합니다. 시체 배경이 여전히 흰색으로 설정되어 있음을 알았습니다. 나는 'Opacity : 0;'시도했다. 그러나 이것은 신체의 모든 요소를 'Opacity : 0;' (그것은 내가 필요로했던 것이 아니었다). 투명; "이것은 작동하는 것 같다하지만 불투명도의 차이 이해하지 못하는입니다 : 나는 '배경을 시도 0과 투명을 누군가가 평신도 측면에서 설명 할 수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

답변

관련 문제