이미지가 점차 사라지도록 CSS에서 이미지 투명도를 설정하는 방법-CSS 튜토리얼-php.cn

이미지가 점차 사라지도록 CSS에서 이미지 투명도를 설정하는 방법

WBOY

풀어 주다： 2021-11-26 18:45:29

원래의

3276명이 탐색했습니다.

CSS에서는 "linear-gradient()" 및 "rgba()" 함수를 사용하여 이미지가 점차 사라지도록 이미지 투명도를 설정할 수 있습니다. 구문은 "linear-gradient(direction,rgba(255,255,255,1)"입니다. ),rgba(255,255,255,0));”.

이미지가 점차 사라지도록 CSS에서 이미지 투명도를 설정하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

이미지가 점차 사라지도록 CSS에서 이미지 투명도를 설정하는 방법

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>123</title>
<style>
.div1 {
box-sizing: border-box;
width: 400px;
height: 320px;
font-size: 22px;
padding-top: 100px;
overflow: hidden;
background: no-repeat center top / 100% 100%;
background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url(1118.02.png)
}
</style>
<div class="div1">设置透明度渐变效果的图片</div>
</body>
</html>

로그인 후 복사

출력 결과:

이미지가 점차 사라지도록 CSS에서 이미지 투명도를 설정하는 방법