CSS 및 HTML에서 이미지 아래 배경색이 작동하지 않습니다.

내 웹 페이지에 배경 이미지를 만들고 배경색을 지정하여 그림이 끝나는 곳에서 색상을 볼 수 있습니다.
HTML :CSS 및 HTML에서 이미지 아래 배경색이 작동하지 않습니다.

가 나는 3 가지 방법으로 시도

<!DOCTYPE html> 

<html> 
<head> 
    <title> title</title> 
    <link href="style.css" rel="stylesheet" type="text/css" > 
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel="stylesheet"> 
</head> 


<body> 
    <div class="row"> 
     <div class="col-md-3"> 
     </div> 
     <div class="col-md-6 header"> 
      dssadsasddsads 
     </div> 
     <div class="col-md-3"> 
     </div> 
    </div> 
</body>

을하고 내가하는 일 중 어느 것도 발견 3 개 CSS의 조합을 시도 : 내가 잘못 뭐하는 거지

body { 
    margin: 0; 
    background-image: url('img/bg6.jpg'); 
    background-repeat: no-repeat; 
    background-size: 100% auto; 
    background-color: #EE2020;} 

body { 
    margin: 0; 
    background: #EE2020 url('img/bg6.jpg'); 
    background-repeat: no-repeat; 
    background-size: 100% auto; 
} 

body { 
    margin: 0; 
    background: url('img/bg6.jpg'), #EE2020; 
    background-repeat: no-repeat; 
    background-size: 100% auto; 
}

을 ?

편집 : 문제점을 발견했습니다. 부트 스트랩 CSS 파일은 background-color가 white로 설정되어 있었고 레이아웃 파일의 background-color 속성에 중요한 것을 추가해야했습니다.

출처

2017-12-10 Matt

마지막 '' 태그가 정상적으로 작동합니다. https://jsfiddle.net/on0wj9m8/1/ – davvv

브라우저에서 내 컴퓨터에서해볼 때 왜 작동하지 않습니까? 나는 크롬과 파이어 폭스를 시도하고 둘 다 흰색 배경을 보여줍니다. – Matt

PNG처럼 ** 투명도 **를 지원하는 이미지 유형을 사용해야합니다. JPG 파일은 ** 아닙니다 **. –

이 코드를보십시오 :

body { 
    margin: 0; 
    background: url('img/bg6.jpg'); 
    background-repeat: no-repeat; 
    background-size: 100% auto; 
    background-color: transparent !important; 
} 

html { 
    background: #EE2020 !important; 
}

이 잘 작동합니다!

출처

2017-12-10 21:43:32

Avoid using !important where you can.

여기에 부트 스트랩 이후 스타일 시트 을 포함하거나 specificity에 대해 알아보십시오. 당신에게 더 구체적인 규칙을 제공 할 수 있습니다 또한 클래스 나 ID를 추가

html > body { background-color: #EE2020;}

있지만,이 경우이를 방지 할 수 있어야한다 : 일할 수있는보다 구체적인 규칙입니다.

라이브러리 뒤에 스타일 을 포함 시키려면 부트 스트랩과 같은 라이브러리를 덮어 쓰려면 기억해야합니다. 이것은 CSS가 설계된 방식입니다. 그것은 "Cascade"(CSS의 C)의 일부입니다. 특수성을 사용하여 다른 충돌을 해결하는 방법을 아는 것도 중요합니다.

출처

2017-12-10 22:42:38

CSS 및 HTML에서 이미지 아래 배경색이 작동하지 않습니다.

답변

관련 문제