이렇게 많은 픽셀 후에 CSS 그라데이션 중지 방법?

-moz-radial-gradient(center -200px , ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat scroll 0 0 transparent;

위의 코드가 있는데이 그라디언트는 위에서 아래로 이동한다는 것을 알았습니다. 30px 이후에 전체 그라디언트를 멈출 수있는 방법이 있습니까? 필요에 따라 조정할 수 있지만 30px 이후에는 어떻게 완료해야합니까?이렇게 많은 픽셀 후에 CSS 그라데이션 중지 방법?

출처

2012-01-14 Nils_e

함께 background-size 속성을 사용할 수 있습니다. 이 같은

 

    
    div { 
     height:100px; 
     background:-moz-radial-gradient(center, ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat; 
     background-size:auto 30px; 
    }

출처

2012-01-14 08:21:29 doyoe

이 방법을 좋아합니다. 주목해야 할 점은 background-repeat : no-repeat; :] ty –

오, 당신의 예가 이미 그랬던 것 ... 다시 한 번 감사드립니다 –

background-repeat : no-repeat가 필요할 것 같습니다. :) – doyoe

css3 그라디언트는 배경 이미지이므로 블록 요소의 전체 높이와 너비를 단색처럼 채 웁니다.

그라디언트의 높이를 제한하려면 요소의 높이를 제한하십시오. 이렇게하는 "깔끔한"방법은 의사 요소를 사용하는 것입니다. 뭔가 ...

div {height: 500px; width: 500px; position: relative} 

div:before { 
    content: " "; 
    width: 100%; 
    height: 30px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: -1; 
    display: block; 
    background-image: [your-gradient-here] 
}

출처

2012-01-14 07:57:31

이렇게하면 부트 스트랩 .panel-body에서 내용이 0 인 div의 Z- 색인을 설정해야하거나 그라디언트 div가 보이지 않습니다. –

CSS3에서 :

radial-gradient(ellipse at center center, 
    rgb(30, 87, 153) 0%, rgb(41, 137, 216) 100px, 
    rgba(255, 255, 255, 0) 101px, rgba(255, 255, 255, 0) 100%)

당신은 그라데이션의 여러 중지 할 수 있습니다. 또한 비율 대신 픽셀 단위로 길이를 지정할 수 있습니다. rgba을 사용하여 투명한 색상을 만들 수도 있습니다.

센터의 0 %에서 첫 번째 색상부터 시작합니다.
그런 다음 두 번째 색상은 x 픽셀입니다. 여기서 x = 100 픽셀을 사용하고 있습니다.
그러면 x + 1 픽셀의 투명한 흰색으로 이동합니다.
100 %까지 투명하게 유지하십시오.

이것은 CSS3를 지원하는 브라우저에서 작동합니다.

출처

2013-09-10 19:12:47 Anthony

이것은 최신 정답이어야합니다. –

그래디언트의 나머지 부분 (설정 한 픽셀 수 이후)이 고정 된 색상 일 수있는 한 다음과 같이 세 가지 색상 정지 점을 사용하십시오 (예 : 30px에서 중지 - 마지막 항목이 초) :

background: linear-gradient(to bottom, rgba(90,90,90,0.75) 0%,rgba(0,0,0,0.75) 30px,rgba(0,0,0,0.75) 100%);

출처

2014-04-14 22:33:44

** **. 배경 이미지를 추가하고 배경색과 같은 줄에 조합 할 수 있습니다. :) – Cammy

이렇게 많은 픽셀 후에 CSS 그라데이션 중지 방법?

답변

관련 문제