2017-12-20 13 views
1

두 그라데이션이있는 배경을 만들고 싶습니다.CSS 배경에 여러 그라디언트 레이어 적용

아래 예제를 만들었고 여러 그라디언트를 함께 넣을 수없는 것 같습니다. 배경 색상을 포함 할 수

마지막 배경 :

.radial-gradient { 
 
    background: radial-gradient(red, yellow, rgb(30, 144, 255)); 
 
} 
 
.linear-repeat { 
 
    background: repeating-linear-gradient(45deg, 
 
     blue, blue 5px, white 5px, white 10px); 
 
} 
 
.combined-gradient { 
 
    background: radial-gradient(red, yellow, rgb(30, 144, 255)), 
 
    repeating-linear-gradient(45deg, blue, blue 5px, white 5px, white 10px); 
 
}
<div class="radial-gradient">radial gradient</div><br/> 
 
<div class="radial-gradient linear-repeat">linear gradient</div><br/> 
 
<div class="radial-gradient linear-repeat">combined gradient 1</div><br/> 
 
<div class="combined-gradient">combined gradient 2</div>

아마 다음과 같은 제약 조건이 레이어링 방지 그라디언트 (예를 MDN-Using multiple backgrounds & MDN-gradient를 기반으로 만들어졌습니다).

두 그라디언트를 배경으로 레이어 할 수없는 경우 어떻게 다른 레이어로 레이어해야합니까?

답변

2

나는 당신이 찾고있는 것이 이것이라고 생각합니다.

코드의 문제점은 무엇입니까? 하나는 볼 이유

음, 당신의 gradient is non-transparent의 각각은, 그래서 하나는 중복 다른 완전히 그건됩니다. 이 문제를 해결하려면 make use of rgba(x,y,z,alpha)transparency 알파를 지정하면 배경을 서로 볼 수있는 페이드 효과가 있습니다.

.combined-gradient1 { 
 
    background: repeating-linear-gradient(45deg, rgba(00, 00, 255, 0.8), rgba(00, 00, 255, 0.8) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px), radial-gradient(rgba(255, 0, 0, 0.8), rgba(255, 255, 0, 0.8), rgba(30, 144, 255, 0.8)); 
 
} 
 

 
.combined-gradient2 { 
 
    background: radial-gradient(rgba(255, 0, 0, 0.8), rgba(255, 255, 0, 0.8), rgba(30, 144, 255, 0.8)), repeating-linear-gradient(45deg, rgba(00, 00, 255, 1), rgba(00, 00, 255, 1) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px); 
 
}
<div class="combined-gradient1">combined gradient 1</div> 
 
<br> 
 
<div class="combined-gradient2">combined gradient 2</div>

관련 문제