CSS를 사용하여 동일한 요소에 두 개의 배경 이미지를 설정할 수 있습니까?

Question

샘플 HTML 코드 :

<table> 
<tr> 
<td class="a b"> 

샘플 CSS 파일 : "B"부분은 무시처럼

.a 
{ 
    background-image:url(a.png); 
} 

.b 
{ 
    background-image:url(b.png); 
} 

보인다.

다른 기술을 사용해도 동일한 셀에 두 이미지를 모두 삽입 할 수있는 방법이 있습니까?

<td class="a"><div class="b">...</div></td> 

는 그 다음 td 첫 번째 배경이되며, 그 내부의 div 두 번째가됩니다

Answer 1

이 작업을 수행 할 수 있습니다. 하나가 투명하면 다른 하나가 보이게됩니다. 나는 b.png이 위에있을 것이라고 생각하지만, 그것에 대해서는 확실하지 않습니다.

Answer 2

두 이미지를 셀의 bg 이미지로 사용할 수 없습니다. 2 셀을 만들거나 이미지를 <img ... /> 태그로 셀 안에 넣어야합니다. 또한 일부 브라우저에는 class = "a b c"클래스 정의를 읽는 데 문제가 있습니다.

Answer 3

아니요. 배경 이미지를 선언 할 때마다 특정 요소에 대한 이전 설명이 대체되거나 무시됩니다. 적용하려는 모든 추가 배경에 요소를 중첩해야합니다. 공상적인 테두리를 요소에 적용하려고하면 CSS3에 몇 가지 새로운 테두리 속성이 있지만 널리 지원되지는 않습니다.

<table> 
<tr> 
    <td class="a"> 
    <div class="b"> 

와 CSS :

Answer 4

이 같은 작동 할 수

.a 
{ 
    background: url(a.png) top left no-repeat; 
} 

.b 
{ 
    background: url(b.png) top right no-repeat; 
} 

충분히 넓은 사업부를 설정하고 하나 개의 이미지가 왼쪽 상단과의 다른에 떠있는 볼 오른쪽 상단

Answer 5

흥미로운 아이디어이지만 색상과 같은 다른 속성이 어떻게 작동하는지 생각해보십시오.

는

.a { color: red; } 
.b { color: blue; } 

는

어떻게 텍스트가 모두 빨간색 및 블루 될 수 있을까? 이 경우 나중에 청색을 지정하기 때문에 파란색이 타이 브레이커를 얻습니다.

a.png와 b.png를 결합한 결과 이미지 ab.png를 만들 수있는 경우 다른 방법이있을 수 있습니다.

.a { background-image(a.png) } 
.b { background-image(b.png) } 
.a.b { background-image(ab.png) } 

경고 : IE6에서는 작동하지 않습니다.

Answer 6

이제 CSS3로 할 수 있습니다. http://www.zenelements.com/blog/css3-background-images/

#my_CSS3_id { 
background: url(image_1.extention) top left no-repeat, 
url(image_2.extention) bottom left no-repeat, 
url(image_3.extention) bottom right no-repeat; 
}