짧은 CSS 코드

Question

나는이 CSS 코드가 있는데, 짧게하고 싶습니다.

#one{ 
background: #6cab26; 
background-image: url(#1_img_url),-moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */ 
} 

#two{ 
background: #6cab26; 
background-image: url(#2_img_url),-moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */ 

} 

#three{ 
background: #6cab26; 
background-image: url(#3_img_url),-moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */ 
} 

이 코드는 배경이있는 그라디언트를 사용합니다.

잘 작동하지만 짧게하는 방법은 무엇입니까?

나는 마라트이 제안이

#one,#two,#three{ 
background: #6cab26; 
background:-moz-linear-gradient(top, #444444, #999999); 
} 

#one{ 
background-image: url(#1_img_url) 
} 
#two{ 
background-image: url(#2_img_url) 
} 
#three{ 
background-image: url(#3_img_url) 
} 

Answer 1

불행하게도, CSS는 현재 을한다은 여러 개의 배경 이미지 레이어를 사용할 때 별도의 배경 이미지 레이어를 덮어 쓰는 방법을 제공하지 않습니다.

LESS 또는 SASS과 같은 CSS 전 처리기를 활용하면 그라디언트를 변수에 저장하여 중복을 방지 할 수 있습니다. 예를 들어, LESS :

@grad: -moz-linear-gradient(top, #444444, #999999); 

#one { 
    background-image: url(#1_img_url), @grad; 
} 

#two { 
    background-image: url(#2_img_url), @grad; 
} 

#three{ 
    background-image: url(#3_img_url), @grad; 
} 

Answer 2

편집

코드 같은 것을 처리기를 사용하지 않고 가능한 한 짧은하려면 (그에게 신용을!)