CSS 만 사용하여 배경색을 페이드 아웃하려면 어떻게해야합니까 (jQuery 없음)?

CSS 만 사용하여 배경색을 페이드 아웃하려면 어떻게해야합니까 (jQuery 없음)?CSS 만 사용하여 배경색을 페이드 아웃하려면 어떻게해야합니까 (jQuery 없음)?

h1 { 
 
    text-align: center; 
 
    font-size: 500%; 
 
    font-family: sans-serif; 
 
    color: white; 
 

 
} 
 

 
ul { 
 
    display:inline-block; 
 
    color:white; 
 
    margin-left:100px; 
 
    font-size: 200%; 
 
    font-family: sans-serif; 
 
} 
 

 
div { 
 

 
    background: black; /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(top, black); /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */ 
 
    background: -webkit-linear-gradient(top, black); 
 
    background: -webkit-linear-gradient(top, #B00000); 
 
    background: -webkit-linear-gradient(top, #B0C4); 
 
    background: -webkit-linear-gradient(top, #B0C4DE); 
 
    background: linear-gradient(to bottom, #B0C4DE); /* Standard syntax */ 
 
}

<div id="overlay"> 
 
    <h1>Mechanics of JWT</h1> 
 
    <br /> 
 
    <br /> 
 
    <ul> 
 
     <li>Use JJWT (https://github.com/jwtk/jjwt) for Java</li> 
 
     <li>Developed and maintained by Stormpath <br />(https://stormpath.com/)</li> 
 
    </ul> 
 
</div>

출처

2017-05-16 blue-success

체크 아웃 http://www.colorzilla.com/gradient-editor/ 그것은 당신의 CSS는 그라데이션이 생성됩니다! –

당신은 그라디언트 작업을 원하십니까? https://codepen.io/anon/pen/wdxrgR 또는 어떤 종류의 애니메이션을하려고합니까? –

시작 색 정지 '선형 그라데이션 (아래쪽, 검정, # B0C4DE)'을 잊었습니다. – hungerstar

이 당신이 찾고있는 무엇인가 : 여기 내 HTML은?

h1 { 
 
    text-align: center; 
 
    font-size: 500%; 
 
    font-family: sans-serif; 
 
    color: white; 
 

 
} 
 

 
ul { 
 
    display:inline-block; 
 
    color:white; 
 
    margin-left:100px; 
 
    font-size: 200%; 
 
    font-family: sans-serif; 
 
} 
 

 
div { 
 

 
    background: black; /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(top, black); /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */ 
 
    background: -webkit-linear-gradient(top, black); 
 
    background: -webkit-linear-gradient(top, #B00000); 
 
    background: -webkit-linear-gradient(top, #B0C4); 
 
    background: -webkit-linear-gradient(top, #B0C4DE); 
 
    background: black linear-gradient(black 0, #B0C4DE 100%); /* Standard syntax */ 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet" type="text/css" href="wingspan.css"> 
 
</head> 
 
<body> 
 

 
    <div id="overlay"> 
 
     <h1>Mechanics of JWT</h1> 
 

 
     <br /> 
 
     <br /> 
 

 
     <ul> 
 
      <li>Use JJWT (https://github.com/jwtk/jjwt) for Java</li> 
 
      <li>Developed and maintained by Stormpath <br />(https://stormpath.com/)</li> 
 
     </ul> 
 
    </div> 
 

 
</body> 
 
</html>

출처

2017-05-16 15:36:07 meteorzeroo

CSS 만 사용하여 배경색을 페이드 아웃하려면 어떻게해야합니까 (jQuery 없음)?

답변

관련 문제