CSS 스타일에서 투명도를 설정하는 방법-CSS 튜토리얼-php.cn

CSS 스타일에서 투명도를 설정하는 방법

清浅

풀어 주다： 2021-04-18 14:49:16

원래의

6209명이 탐색했습니다.

CSS 스타일에서 투명도를 설정하는 방법: 먼저 HTML 샘플 파일을 만든 다음 img를 통해 이미지를 만듭니다. 마지막으로 "opacity: value | 상속;".

CSS 스타일에서 투명도를 설정하는 방법

이 문서의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터, HTML5&&CSS3 버전.

CSS에서는 opacity 속성을 추가하여 요소의 투명도를 변경할 수 있습니다. 불투명도 값은 0~1이며, 값이 작을수록 투명해집니다.

페이지에서 우리는 CSS의 스타일을 투명도를 설정하고 페이지를 아름답게 하는 데 사용하는 경우가 많습니다. 오늘은 CSS의 불투명도 속성을 사용하는 방법을 소개하겠습니다. 이는 특정 참조 값이 있으며 모든 사람에게 도움이 되기를 바랍니다 #🎜 🎜#

# 🎜🎜#opacity attribute

opacity: value|inherit;

로그인 후 복사

value: 불투명도를 설정하는 데 사용됩니다. 0.0(완전 투명)에서 1.0(완전 불투명)

inherit: 불투명도 속성의 값은 상위 요소에서 상속되어야 합니다.

#🎜🎜 ##🎜🎜 #

예:

CSS 스타일에서 투명도를 설정하는 방법 이미지를 불투명하게 설정

<body>
未设置透明度：
<img src="images/5.jpg" style="width:100px;height:100px;">
设置了透明度：
<img src="images/5.jpg" style="opacity: 0.6;width:100px;height:100px;">
</body>

로그인 후 복사

효과는 다음과 같습니다.

#🎜🎜 #

# 🎜🎜#

참고:

CSS 스타일에서 투명도를 설정하는 방법 IE9, Firefox, Chrome, Opera 브라우저에서 투명도를 설정하려면 불투명도 속성을 사용하세요. 불투명도 속성은 0.0에서 1.0 사이의 값으로 설정할 수 있습니다. 값이 작을수록 투명해집니다.

IE8 및 이전 버전에서는 필터 필터:alpha(opacity=x)를 사용하며, x는 0에서 100까지의 값을 가질 수 있습니다. 값이 작을수록 투명해집니다.

【추천 강좌:

CSS 강좌

】#🎜🎜 #사례 공유불투명도 속성을 사용하여 아래로 향하는 화살표 만들기

이 경우는 CSS3의 animation animation 속성을 이용하여 animation 속성의 값을 설정하여 애니메이션 실행 시간과 애니메이션 진행 중 투명도 변화를 지정하는데 필요합니다.

<style>
.box
  {  -webkit-animation:box 5s infinite;
    -webkit-animation-fill-mode: both;
      }
@-webkit-keyframes box
 {
from
{   
 opacity: 0;
  }
 to
{
  opacity: 1;
 }
  }
</style>	
</head>
<body>
<div class="box">
<img src="images/jiantou.png">
</div>
</body>

로그인 후 복사

효과 그림은 다음과 같습니다. 🎜## 🎜🎜#

요약: 위 내용은 이 글의 전체 내용이므로, 모든 분들의 공부에 도움이 되길 바랍니다.

위 내용은 CSS 스타일에서 투명도를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!