내용을 투명하게 만드는 방법 - opacity

opacity로 요소의 투명도를 정할 수 있습니다. 0부터 1.0까지의 수를 넣습니다. 숫자가 작을수록 투명해집니다
1 min read

opacity

opacity로 투명도를 정할 수 있습니다.

 

기본형

opacity : number
  • number : 0 부터 1.0 까지의 수를 넣습니다.
  • 숫자가 작을수록 투명해집니다.

 

예제

<div class="a">
  <h1>Lorem Ipsum Dolor.</h1>
</div>

<div class="b">
  <h1>Lorem Ipsum Dolor.</h1>
</div>
div {
  width: 80%;
  padding: 50px 0px;
  text-align: center;
  color: #ffffff;
}
.a {
  border: 1px solid #212121;
  background-color: #212121;
}
.b {
  border: 1px solid #ff9800;
  background-color: #ff9800;
  position: fixed;
  top: 100px;
  left: 100px;
  opacity: 0.7;
}

You may like these posts

  • font-weight font-weight 속성으로 글자의 굵기를 지정합니다.   기본형 font-weight : normal | bold | bolder | lighter | number normal : 보통 굵기입니다. 숫자 400과 같습니다. bold : 굵은 굵기입니다. 숫자 …
  • font-variant font-variant는 소문자를 작은 대문자로 바꾸는 속성입니다. 즉, 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다.   기본형 font-variant : normal | small-caps normal : 일반적인…
  • 공백이 제대로 처리되지 않는다면 문서가 지저분해 보일 수도 있습니다. 이럴 때 whith-space 속성을 사용하면 텍스트와 함께 연속해 입력된 여러 개의 공백을 어떻게 처리할지 지정할 수 있습니다.   white-space white-space 속성은 스페이스와 탭, 줄바꿈, 자동 …
  • text-transform 영문자를 표기 할 때 text-transform 속성은 모든 글자를 대문자로 또는 소문자로 바꾸거나 첫번째 글자를 대문자로 변환할 수 있습니다. 이 속성은 한글에서는 의미가 없는 속성입니다.   기본형 text-transform : none | capita…
  • line-height 문단의 첫 줄을 넘어 두 줄 이상되면 '줄 간격'이 생깁니다. 그런데 줄 간격은 너무 좁으면 글의 내용이 눈에 들어오지 않습니다. 이때 line-height 속성을 이용하면 원하는 만큼 줄 높이를 조절할 수 있습니다.   기본형 line-height : norm…
  • overflow overflow 속성은 white-space: norwap;으로 지정해 줄바꿈을 하지 않을 때는 텍스트가 기준선을 벗어나 넘칠 수도 있습니다 이렇게 박스의 크기 밖으로 넘치는 내용을 어떻게 처리할지 정하는 속성이 입니다.   기본형 overflow : visible …

Post a Comment