2012-11-28 2 views
0

Chrome 버전 24.0.1312.25 beta-m을 사용 중이며 소규모 사이트의 방사형 그래디언트를 얻으려고합니다. Chrome에서 올바르게 표시되지 않는 것 같습니다. HTML로Chrome 방사형 그래디언트가 올바르게 표시되지 않습니다.

html { 
    background: -webkit-radial-gradient(circle, rgb(255, 255, 255), rgb(0, 0, 0)); 
} 

:

<!DOCTYPE HTML> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" type="text/css" href="dHb.css" /> 
    </head> 

    <body> 
    </body> 
</html> 

그리고이로 표시하는 것 :

내가 사용하고있어 CSS는 모든 http://i.imgur.com/GCWyF.jpg

첫째, 방사상 아니에요. 둘째, 가까이에서 보면 밴드가 직접 중앙에 있습니다.

왜 이런 일이 일어나는 지 알 수 있습니까? 내가 제대로 작동하도록하려면 어떻게해야합니까?

답변

1

내가 필요한 것은 나에게 방사형 그라디언트를 제공 않습니다이

<!DOCTYPE HTML> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" type="text/css" href="dHb.css" /> 
    </head> 

    <body> 
    </body> 
</html>​ 

CSS를

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
    margin: 0; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 

    /* fallback */ 
    background-color: #2F2727; 
    background-image: url(images/radial_bg.png); 
    background-position: center center; 
    background-repeat: no-repeat; 

    /* Safari 4-5, Chrome 1-9 */ 
    /* Can't specify a percentage size? Laaaaaame. */ 
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#FFFFFF), to(#000000)); 

    /* Safari 5.1+, Chrome 10+ */ 
    background: -webkit-radial-gradient(circle, #FFFFFF, #000000); 

    /* Firefox 3.6+ */ 
    background: -moz-radial-gradient(circle, #FFFFFF, #000000); 

    /* IE 10 */ 
    background: -ms-radial-gradient(circle, #FFFFFF, #000000); 

    /* Opera cannot do radial gradients yet */ 
}​ 

http://jsfiddle.net/ETKpb/5/

+0

을 시도하지만, 전체 페이지 수있다. 나는 'html' CSS 태그로 선형 그라디언트를 할 수 있습니다, 나는 다른 페이지를 위해 그것을했습니다. – user1493839

+0

@ user1493839 이것은 무엇을 의미합니까? –

+0

그 덕분에, 고마워! – user1493839

관련 문제