부트 스트랩에서 카드 블록의 불투명도를 변경하는 방법 4

간단한 카드 부트 스트랩 4 구성 요소 만 있습니다. 내가 달성하고 싶었 무엇부트 스트랩에서 카드 블록의 불투명도를 변경하는 방법 4

는

<div class="card"> 
    <div class="card-header">This is my header</div> 
    <div class="card-block">This is my block</div> 
    <div class="card-footer">This is my footer</div> 
</div>

1의 불투명하지만 0.4의 불투명도를 가진 블록 머리글과 바닥 글을 가지고 있었다. 나는

.card-block { background-color: rgba(245, 245, 245, 0.4); }

출처

2017-02-24 Luke Flournoy

에 당신이 사용하여 시도가 ['opacity'] (https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) – happymacarts

는 .card이! 중요한 키워드를 내가 상관없이 내가 넣어 여부 .card 블록에 설정하려고 한 배경 불투명도 CSS 스타일을 무시하거나되지 않은 부트 스트랩 클래스를 밝혀졌습니다.

나는 카드에 배경 스타일을 추가하고 바로 개별 혼탁 .card 헤더과의을 변경하여이 문제를 해결할 수 있었다. 카드 바닥 글 1.

.card { background-color: rgba(245, 245, 245, 0.4); } 
.card-header, .card-footer { opacity: 1}

출처

2017-02-24 18:09:17

당신이 opacity

.special-card { 
 
/* create a custom class so you 
 
    do not run into specificity issues 
 
    against bootstraps styles 
 
    which tends to work better than using !important 
 
    (future you will thank you later)*/ 
 

 
    background-color: rgba(245, 245, 245, 1); 
 
    opacity: .4; 
 
}

<div class="card"> 
 
    <div class="card-header">This is my header</div> 
 
    <div class="card-block special-card">This is my block</div> 
 
    <div class="card-footer">This is my footer</div> 
 
</div>

출처

2017-02-24 05:21:41 happymacarts

대답 경우 유용하고 만족 스럽습니다. – happymacarts

이것은 텍스트의 불투명도를 변경하기 위해 노력하고 있습니다. 배경은 여전히 .adf 부모 div에서 상속받은 단색의 흰색입니다. –

'background-color : rgba (245, 245, 245, 1);을 수정하여 필요합니다. – happymacarts

귀하의 CSS가 좋아 보인다 사용하여 시도 행운과 배경 색 스타일로 rbga 사용하려고했습니다. 문제는 귀하의 부트 스트랩 파일이 귀하의 코드를 무시하고 있다고 생각합니다. 내가 사용하는 것이 좋습니다 실 거예요 있지만 코드를 덮어보십시오! 중요

.card-block { background-color: rgba(245, 245, 245, 0.4) !important; }

는 최우선 대한 this link를 참조하십시오. 해당 호출 특이

출처

2017-02-24 05:23:02

부트 스트랩에서 카드 블록의 불투명도를 변경하는 방법 4

답변

관련 문제