2013-08-19 2 views
1

그라디언트 배경을 보정/조정하여 페이드가 더 낮게 시작되도록 할 수 있습니까? 예, 여기 피들을 보시길 바랍니다 http://jsfiddle.net/gZgLc/5/CSS 그라디언트 배경 조정

예를 들어 '123test'텍스트에서 흰색 티 시작을 페이드 인시키고 싶다고 가정 해 봅시다. 어떻게해야합니까?

HTML

#main { 
width:958px; 
position:relative; 
top:-9px; 
background:#FF9900 url(../images/core/header.png) no-repeat center top; 
border:1px solid #dadada; 
border-top:none; 
border-bottom:2px solid #dadada; 
-webkit-border-radius:8px; 
-moz-border-radius:8px; 
-ms-border-radius:8px; 
-o-border-radius:8px; 
border-radius:8px; 
margin:0 auto 25px; 
background: #fff; 
background: url('linear-gradient.png') 0 0 repeat-x; 
background: -webkit-linear-gradient(#fff, #FF9900); 
+0

당신은 즉시 의미, 또는 항상 다르다, 그래서 그냥 CSS를 변경 마십시오 원하는 색상을 반영하기 위해? 올바른 구문이 무엇인지 알고 싶다면 ...이 도구를 사용하는 것이 좋습니다. http://www.colorzilla.com/gradient-editor/ – robooneus

+0

그래, 방금 그라디언트를 사용하여 원하는대로 설정할 수 있습니다. 항상 시작하기. 나는 그것을 바꾸기를 원하지 않는다. 고마워, 내가 링크를 확인해 보겠습니다 –

+0

#main 뒤에 #background'div'를 추가 할 수 있습니까? –

답변

2

은 확실히 ... 당신은 그에 대한 비율을 사용할 필요가

<div id="main"> 
<div class="feature-box"> 
    <div class="feature-box-tab"> 
    <div class="slide" style="height:250px;"> 

      <div class="inner"> 
       <ul class="breadcrumb"> 
        <li><a href="index.php">Home</a></li> 
       </ul> 
      </div> 
    </div> 
    </div> 
</div> 

<div class="single-feature-top"> 
    <p>123test. 123test<br><br> 
</div> 
<br> 
</div> 

CSS.

Solution

모든 코드는이 웹 사이트에서 생성되었습니다. Source Website

CSS가 추가되었습니다.

background: -moz-linear-gradient(top, #fff 0%,#fff 75% #ff9900 80%, #ff9900 100%); 
/* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff),color-stop(70%, #fff), color-stop(80%, #ff9900), color-stop(100%, #ff9900)); 
/* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #fff 0%,#fff 75%, #ff9900 80%, #ff9900 100%); 
/* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #fff 0%,#fff 75%, #ff9900 80%, #ff9900 100%); 
/* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #fff 0%,#fff 75%, #ff9900 80%, #ff9900 100%); 
/* IE10+ */ 
background: linear-gradient(to bottom, #fff 0%,#fff 75%, #ff9900 80%, #ff9900 100%, #ff9900 100%, #ff9900 100%); 
/* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eded2f', endColorstr='#ff9900', GradientType=0); 
/* IE6-8 */ 

편집 :는 또한이 나이가 IE 브라우저 (IE6-8)에 정확히 같은 작동하지 않을 수 있음을 기억하십시오.

EDIT2

: 바이올린의 변경 색상

+1

백분율, 길이 단위 (예 :'px', em' 등)도 작동합니다. – xec

+0

수정하십시오. 그러나 적용되는 요소에 상대적이어야합니다. – MarsOne

+0

MarsOne, 당신의 솔루션은 내가 원했던 것입니다. 내가 원하는 것을 얻기 위해 비율을 약간 편집해야했지만 일을 마쳤습니다! 고마워. –

관련 문제