부모는 배경색이 있지만 자식은 투명합니다.

부모 div가 특정 배경색을 가질 수 있는지, 자식 div가 CSS 만 사용하여 투명하게 표시되는지 궁금합니다.부모는 배경색이 있지만 자식은 투명합니다.

제가 원하는 것을 표시하는 당신에게 그림을 보여주지 : div의 모서리를 둥글게 때문에 enter image description here

나는 두 형제 div를 함께 할 수 없습니다.
모서리와 형제 divs에 대한 이미지를 사용하여이 작업을 수행 할 수 있지만 CSS 만 있으면 원하는대로 우아하고 간단한 방법이 있는지 알고 싶습니다.

2013-05-27 Devdatta Tengshe

사실, 아이는 ** 투명 **이지만 그 아래는 파란색입니다. –

@ user2417834 : 정확하게, 부모 div 밑에있는 것이 무엇이든 Div Div 요소 –

형제와 함께 할 수 있으며 원하는 모서리에만 둥근 모서리를 사용할 수 있습니다. This page에는 수행 방법에 대한 좋은 정보가 있습니다. 기본적으로 다음을 사용합니다 : border-top-left-radius: 10px 5px;.

그래서,

<div id = "container"> 
    <div></div> 
    <div></div> 
</div>

CSS는 :

#container div:first-child 
    { 
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px; 
    background-color: blue; 
    } 

#container div:last-child 
    { 
    border-radius: 10px; 
    background-color: rgba(0,0,0,0); 
    /* Same color as the sibling div and a distance of the radius + the separation */ 
    box-shadow: -12px 0 blue; 
    }

~~난 그 일을한다고 생각합니다.~~ 그것은 작동합니다. 여기에 더 많은 이미지를 닮은듯한 좀 더 심미적 인 수정이 포함 된 jsfiddle이 있습니다.

EDIT : 오른쪽 테두리는 원래 색상의 테두리가 필요하므로 새 jsfiddle을 조합하고 위의 코드를 편집했습니다.

출처

2013-05-27 05:31:16

+1을 통해 볼 수 있도록 +1하고 싶습니다. 다음과 같이하십시오 :) [피들] (http://jsfiddle.net/div>) –

방금 바이올린을 보러갔습니다. ( –

내 다이어그램은 명확하지 않습니다. 하위 div에는 네 개의 둥근 모서리가 있습니다. 배경이있는 첫 번째 형제가 둥근 모서리가 없더라도 작은 간격 아무 배경도없는 둥근 모서리 근처 –

부모는 배경색이 있지만 자식은 투명합니다.

답변

관련 문제