2016-10-25 3 views
1

그래서 Bootstrap Panel-Heading을 투명하게 설정하려고합니다.
Z- 색인 때문에 나는 그것을하는 방법을 이해할 수 없다.
부트 스트랩 ".panel-heading"불투명도?

패널 제목은 패널 기본값의 맨 위에 있습니다.

HTML

<div class="panel panel-default"> 
    <div class="panel-heading"></div> 
    <div class="panel-body"></div> 
</div> 

CSS는

.panel-default{ 
    background: rgba(255, 255, 255, 0.9); 
} 
.panel-default .panel-heading{ 
    background: rgba(255, 255, 255, 0.0); 
} 
.panel-default .panel-body{ 
    background: rgba(255, 255, 255, 0.95); 
} 

나는 전체 패널 (패널 기본) 투명,
를 만들기 위해 노력하고 몸을 흰색 색상을 준 것 . 여기에서 문제는 패널 몸체가 표제 아래의 전체 공간을 덮지 않는다는 것이다. 방금 텍스트/텍스트가있는 흰색 영역이 있습니다.

패널 기본 단색을 흰색으로 만들면 투명한 패널 제목으로 패널 기본 단색을 "처리 할"수 없습니다. 표제는 패널 기본값 위에 있으므로


UPDATE
그래서 내 문제는 내가 제목이 투명하게 싶지만 몸이 고체 될 것입니다. 그리고 몸체는 패널 제목 아래의 전체 공간을 덮는다.

편집 나는 100 % 패널 몸 높이를 설정하려하지만 여전히 패널 제목 아래의 공간 전체를 덮고 아닙니다.

enter image description here

UPPDATE
내가 패널 기본 높이를 설정했기 때문에 전체 공간이 있던 패널이 몸 아닌가요 커버에 문제. 대신 패널 바디 높이를 설정해야했습니다!

답변

2

아래의 CSS를 사용하면 도움이 될 수 있습니다.

이 습관에서 내 모든 문제를 해결

.panel-default{ 
    background: transparent; 
} 
.panel-default .panel-heading{ 
    background: transparent; 
} 
.panel-default .panel-body{ 
    background: #fff; 
} 
+0

CSS ... –

+0

그것은 당신이 질문을 정확하게 수행합니다 패널 제목은'해야'이 제외 http://www.bootply.com/eNKQFNkEgB을 내 편집 사진에서 볼 수 있듯이 투명하지 않고 반투명합니다 ( – Turnip

+0

@Turnip). 패널 몸체는 바닥 공간 전체를 덮지는 않지만, 내 질문에 명확하지 않은 maby ... –

관련 문제