IE10에서 CSS 선형 그라디언트를 사용하는 방법은 무엇입니까?

IE10에서는 페이지 상단에서부터 페이지 하단까지 CSS 선형 그라디언트를 만들려고합니다. 이것은 내가 지금까지IE10에서 CSS 선형 그라디언트를 사용하는 방법은 무엇입니까?

<!DOCTYPE HTML> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Test</title> 
    </head> 
    <body> 

     <meta http-equiv="X-UA-Compatible" content="IE=10"> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

     <script type='text/javascript' src='./includes/js/jquery-2.0.0.min.js'></script> 
     <link rel='stylesheet' type='text/css' href='./includes/css/css.css'/> 




     <p id="title"> 
      Test 
     </p> 


    </body> 
</html>

CSS

body { 
    margin: 0px; 
    padding: 0px; 
    background-image: linear-gradient(to bottom, #dcdcdc 0%, #b0b0b0 100%); 
} 



#title { 
    color:red; 
}

해야하지만 나는 그것을보고 원하는 방식으로 보이지 않는 것입니다. 100px 높이의 선형 그래디언트로 끝나고 아래쪽으로 반복됩니다. 무슨 잘못

enter image description here

사람이 알고 있나요이 비슷한 이미지?

출처

2013-04-24 omega

페이지 본문에 내용이 있습니까? 아마 당신은 그 CSS (그리고 사용 된 마크 업)에서 볼 수있는 실제 렌더링 스크린 샷을 제공하기를 원할 것입니다. – BoltClock

예, CSS가 body 태그에 있습니다. 즉, 전체 페이지를 덮어야합니다. 그렇습니까? 현재 전체 페이지를 덮고 있지만 약 100px 높이에서 반복됩니다. – omega

그래디언트는 신체에 적용될 때 기이하게 행동 할 수 있으며이 동작은 대개 내용을 의미하는 신체 치수에 따라 달라집니다. 나는 그것이 반복을 일으키는 것이 정확히 무엇인지 결정할 수 있도록 그것이 살아 있는지를 볼 필요가있다. – BoltClock

이것은 IE10만으로는 문제가되지 않습니다. 사실 그것은 의도적으로 설계된 것입니다.

배경은 body 및/또는 html에 적용될 때 special behavior을 갖는다. 당신이 html을 건드리지 않고 body에 배경을 적용 할 때, 무슨 일 신체 배경이 뷰포트에 전달됩니다 있다는 것입니다, 그것은 html에 선언 된 것처럼 그 배경의 역할 :

루트 요소 문서의 경우

는 HTML입니다 HTML 요소 또는 XHTML html 요소 : 루트 요소의 'background-image'의 계산 된 값이 'none'이고 'background-color'가 'transparent'인 경우 사용 도구는 대신 백그라운드 속성의 계산 된 값을 전파해야합니다 해당 요소의 첫 번째 HTML BODY 또는 XHTML body 하위 요소에서 가져옵니다. 요소의 사용 된 값은 초기 값이며 전파 된 값은 루트 요소에 지정된 것처럼 처리됩니다. 이 다르게 나타나는

에도 htmlbody 요소와 실제 (쿼크 모드의 IE를 제외) 극한 100 % 신장 시작되지 않는다; 오히려 다른 블록 상자와 마찬가지로 내용의 높이를 사용합니다. 즉, html은 p 요소와 기본 여백 (body 요소로 접혀 있음)의 결합 된 높이와 같은 높이입니다.

기본적으로 그라디언트 배경이 전체 높이와 너비를 가로 질러 늘리도록 설계되어 있지만 실제 높이가 html 인 경우 그래디언트가 전체 뷰포트를 단독으로 채울 수있는 충분한 공간을 허용하지 않으므로 특정 높이까지만 확장됩니다 그것이 반복되기 전에. AFAIK,이 동작은 최신 표준에 따라 그라디언트를 구현하는 모든 브라우저에서 일관됩니다.

당신이 전체 페이지에 대한 충분한 내용이없는 경우에도 전체 뷰포트에 걸쳐 그라데이션 스트레칭을 확인하려면, 단순히이 규칙 추가 : 당신이 원하는 경우

html { 
    min-height: 100%; 
}

, 당신은 배경을 이동할 수 있습니다 body에서 html까지의 스타일도 있지만, 한 번에 그 요소 중 하나에 배경을 설정 만하면 적용 할 때 차이가 없습니다.

출처

2013-04-24 01:03:39 BoltClock

고마워, 그 효과는 좋았지 만 height : 100 %와 background-attachment를 사용하면 스크롤하는 위치에 상관없이 그라디언트가 동일하게 유지됩니다. 그라데이션을 위에서 아래로 (스크롤을 포함하여) 실제로 확장하는 방법이 있습니까? – omega

@omega : 그러면 'min-height : 100 %'가됩니다. 내 대답을 편집했습니다. – BoltClock

그래, 효과가 있었다. – omega

아래에 게시 된이 수정본으로 도움이되었습니다.그냥 나는 이것이 이전 게시물 알고하지만 난 확신 사람들은 여전히 내가 선형 그라데이션을 추가하고 작동 난 배경 - 첨부 파일 속성 경우 내가 발견 때까지 작동하지 않는 노력이 투쟁입니다

background-attachment:fixed

를 추가합니다.

출처

2016-03-11 06:41:14

IE10에서 CSS 선형 그라디언트를 사용하는 방법은 무엇입니까?

답변

관련 문제