between 0 and 1

배경이미지에 Fading 효과 주기 본문

Software Development Engineering/HTML & CSS

배경이미지에 Fading 효과 주기

devxpert.yoon 2019. 4. 12. 08:09
728x90
반응형

HTML & CSS 예제

 

HTML


	
	
 

CSS

body { padding: 0; margin: 0;}

.image { position: relative; background-color:red;}
.image img { display: block; position: relative; z-index: 1; width: 100%; }
.image .fade { 
	position: absolute; bottom: 0; width: 100%; height: 350px; z-index: 2; 
    background: rgba(255, 255, 255, 0) linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1.0) 60%) repeat scroll 0 0;  
}

 

728x90
반응형

'Software Development Engineering > HTML & CSS' 카테고리의 다른 글

[DropDown UI] UL - LI 구조를 Select (Drop Down) UI 로 만들기  (0) 2020.12.01
'Software Development Engineering/HTML & CSS' Related Articles more