배경 그라디언트 색상 및 배경 이미지 DRYly

제목이 여러 개 있고 각각의 배경에는 동일한 그라디언트 색상을 표시하지만 다른 (반복되지 않는) 배경 이미지를 표시하고 싶습니다. 백그라운드 그래디언트 색상이나 배경 이미지 위치에 대한 CSS 규칙을 복제하는 것을 피하기를 원합니다. 왜냐하면 각 머리글에 대해 동일하기 때문입니다. 즉, 개별 제목에 대해 지정해야하는 유일한 것은 배경 이미지 파일에 대한 경로입니다. 여기 배경 그라디언트 색상 및 배경 이미지 DRYly

내가 지금이 내용은 다음과 같습니다

<h1 class="banner bgImage img1">background image 1</h1> 
<h1 class="banner bgImage img2">background image 2</h1> 
<h1 class="banner bgImage img3">background image 3</h1> 
<h1 class="banner">heading without background image</h1> 

.banner { 
    /* For old browsers that don't support gradients */ 
    background-color: #9FCC1D; 

    /* browser-specific prefixes omitted */ 
    background-image: linear-gradient(#75A319, #9FCC1D); 
    padding: 7px 7px 7px 15px; 
} 

/* Specifies position of background image */ 
.bgImage { 
    background-position: 5px 50%, 0 0; 
    background-repeat: no-repeat; 
    padding-left: 30px; 
} 

.img1 { 
    background-image: url(img1.png"), linear-gradient(#75A319, #9FCC1D); 
} 

.img2 { 
    background-image: url(img2.png"), linear-gradient(#75A319, #9FCC1D); 
} 

.img3 { 
    background-image: url(img3.png"), linear-gradient(#75A319, #9FCC1D); 
}

내가 뭔가를 '아무튼

각 .imgX 규칙에 linear-gradient 스타일을 반복해야이

에 문제가 몇 가지 있습니다 Chrome에서 올바르게 렌더링되지 않으며 background-image 및 background-repeat 속성의 쉼표로 구분 된 목록을 지원하지 않는 것으로 보입니다. 이것은 내가 CSS 규칙의 중복을 최소화하면서 배경이 크롬에서 렌더링되는 방식으로 문제를 해결할 수있는 방법

enter image description here

크롬

무엇을 표시됩니다입니까?

출처

2012-02-24 Dónal

그것은합니다 (-webkit- 접두사를 사용하여) 크롬 17.0.963.56 분에 나를 위해 잘 작동 – juanrpozo

배경 아이콘으로는 가상 클래스 인 :before을 사용하십시오.

.img1:before { 
    content: ''; 
    float: left; 
    position: relative; 
    background: transparent url('img1.png') left top no-repeat; 
    width: 16px; /* change to actual width of img */ 
    height: 16px; /* change to actual height of img */ 
}

또는, 당신은 CSS의 양을 해소하기 위해 노력하고 있기 때문에, 당신은 그라데이션의 클래스를 지정하고 HTML에 그것을 추가 할 수 있습니다.

출처

2012-02-24 17:07:54

나는 각각 지정 –

을 향하고 훨씬 CSS 그냥 다른 배경 이미지를 지정할 수 있음을 사용할 필요가 없습니다 바라고 있어요 귀하의 그라디언트에 대한 클래스입니다. 해당 클래스를 HTML에 추가하십시오. –

http://jsfiddle.net/2Hcgn/ – juanrpozo

단,이 배경 그래디언트를 적용 할 수있는 클래스가 두 개 있습니다 (bgImage 및 banner). 해당 클래스 중 하나에 그라데이션을 적용하고 거기에서 이동하십시오. 이미지 URL 바로 뒤에 repeat-x을 추가하여 반복 할 것인지 확인하십시오.

출처

2012-02-27 14:43:27

배경 그라디언트 색상 및 배경 이미지 DRYly

답변

관련 문제