부드러운 CSS 그라데이션

CSS 그라디언트 사용법을 배우고 있습니다.부드러운 CSS 그라데이션

내 문제는 위에서 아래로의 그라디언트입니다. 을 참조하십시오.을 참조하십시오. 색상이 "정지"됩니다.

enter image description here

이 내 CSS 코드

#header { 
    width:1000px; 
    height:250px; 
    background:-moz-linear-gradient(top, #BF7A30 30%, #EDD599); 
    background:-webkit-linear-gradient(top, #BF7A30 30%, #EDD599); 
}

는 바닥 기울기 위쪽에서 정지를 부드럽게하는 방법은 무엇입니까? (내 눈이 왼쪽에서 오른쪽이나 왼쪽 그라디언트에서 잘 보이지 않습니다.)

출처

2012-10-31 Isuru

생각해 보면 아래의 CSS가 필요합니다.

CSS :

#header { 
    width:1000px; 
    height:250px; 
    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%); 
    /* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%); 
    /* Opera */ 
background-image: -o-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%); 
    /* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #EDD799), color-stop(1, #BF7F37)); 
    /* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #EDD799 0%, #BF7F37 100%); 
    /* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #EDD799 0%, #BF7F37 100%); 
}

http://jsfiddle.net/xPLPH/

선형 그라디언트에 대해 자세히 알아보기 https://developer.mozilla.org/en-US/docs/CSS/linear-gradient

출처

2012-10-31 04:54:11

이렇게하면됩니다. 고맙습니다. :) – Isuru

이것은 보이는 색상 멈춤과 함께 명명 된 문제에 대한 해결책이 아닙니다. 그래디언트 사이에 컬러 스톱을 사용하지 말고 가장자리로 이동하려면 먼저 0 %, 마지막으로 100 %를 사용하는 것이 좋습니다. 문제의 저자 코드처럼 색상 멈춤 점을 이동하면 다음과 같이 볼 수 있습니다. http://jsfiddle.net/zoaporx0/1/ –

전혀 대답이 아닙니다. 가장자리가 계속 표시됩니다. –

이 그라데이션을 만들기위한 나의 마음에 드는 도구입니다. 특히 SASS/SCSS 구문을 출력하는 것이 좋습니다.

http://www.colorzilla.com/gradient-editor/

출처

2012-10-31 04:56:40

이 도구를 알고 있지만 CSS를 통해이 도구를 배우고 싶었습니다. 도구로 시간을 절약 할 수 있지만 재미는 없습니다. : D – Isuru

이것은 CSS를 통해 이루어집니다. 이것은 실제로 다양한 접근법을 배우는 데 도움이 될 것입니다. –

부드러운 CSS 그라데이션

답변

관련 문제