투명한 배경색이 작동하지 않습니다.

부트 스트랩 4에이 문제가 있습니다. 웹 페이지에서 작업 중이며 css로 고정 된 배경을 넣었습니다. 나는이 투명 공간에서 배경 이미지의 조각을보기 위해 복수의 <div>을 서로 아래에 놓고 그 사이에 약간의 공간을두고 싶습니다. 문제는 모든 종류의 배경 텍스트를 흰색으로 만들어서 투명 함이 작동하지 않는다는 것입니다. 나는 배경을 투명하게 만들어야하는 CSS에서 "spazioVuoto"클래스를 만들었지 만 그렇지 않습니다. 누구든지 나를 도울 수 있습니까?투명한 배경색이 작동하지 않습니다.

추신. 당신은 내가 무슨 말인지의 예를보고 싶다면, 여기 http://it.diesel.com/it/

보는 것은 codepen 예에게 있습니다 https://codepen.io/anon/pen/ooJqVK

이 내 코드

html { 
    background: url(img/background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

.spazioVuoto { 
    background-color: transparent; 
    padding: 5em; 
}

출처

2017-12-01 Orange Orange

웹 사이트로 연결되는 링크 대신 JSFiddle (또는 유사)을 사용하십시오. 온라인 샌드 박스는 문제가있는 부분에 초점을 맞추고 솔루션을 제안하기 쉽게 만듭니다. –

@ ADreNaLiNe-DJ https://codepen.io/anon/pen/ooJqVK 여기가 친구입니다 –

'body' 배경색을 'html' 요소가 아닌 이미지로 대체해야합니다. 그렇다면 ** 모든 ** 자식 요소에 대해 bg 색상을 설정해야합니다 ... https://codepen.io/Paulie-D/pen/ooJdEx –

여기에 문제는 당신의 몸이다 backgournd-color : #fff가 있습니다. 따라서 spazioVuoto가 배경을 투명하게하더라도 색은 흰색이므로 여전히 흰색입니다. 변경 (spazioVuoto background-color)을 빨간색으로 변경하면 효과가 있음을 알 수 있습니다. 따라서 몸체 배경을 투명하게 놓은 다음 다른 컨테이너로 작업하여 배경색을 설정해야합니다.

html { 
    background: url("w3schools.com/w3css/img_fjords.jpg") 
    no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
body { 
    background-color:transparent !important; 
} 
.spazioVuoto { 
    background-color: transparent; 
    padding: 5em; 
} 
.container { 
    max-width: 100% !important; 
    background-color: #fff; 
    width: 100% !important; 
    padding: 1% 20% !important; 
}

출처

2017-12-01 11:30:50 Aleksander

투명한 배경색이 작동하지 않습니다.

답변

관련 문제