집 > 기사 > 웹 프론트엔드 > CSS가 배경을 표시할 수 없으면 어떻게 해야 합니까?

CSS가 배경을 표시할 수 없으면 어떻게 해야 합니까?

藏色散人원래의: 2023-02-01 09:59:555180검색

배경을 표시할 수 없는 CSS에 대한 해결 방법: 1. CSS가 호출되었는지 확인하고 올바른 CSS 경로를 다시 호출합니다. 2. CSS 이미지 주소를 확인하고 올바르게 수정합니다. 4. div가 포함되어 있는지 확인하고 설정하고 수정합니다. 5. div 코드를 표준화합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3 버전, DELL G3 컴퓨터

CSS에서 배경이 표시되지 않으면 어떻게 해야 하나요?

div 배경 이미지나 색상이 표시되지 않는 해결 방법

배경 이미지가 표시되지 않는 주요 이유는 다음과 같습니다.

1 CSS가 호출되지 않습니다

2. 부정확함

3. div의 높이가 고정되지 않았거나, 자동이거나, 값이 설정되지 않았거나, 높이가 충분히 높지 않습니다

4. div가 중첩되어 있습니다

해결책:

- DIV 높이는 자동이며 배경색을 표시할 수 없습니다. 원래 코드 height:auto;를 height:100%;로 변경하고 IE6, 7과도 호환됩니다. , 8 및 Google Firefox.

- 객체에 배경색 스타일이 설정되어 있고 객체의 내부 상자가 float 속성 스타일을 사용한다고 가정합니다. 이때 객체가 떠서 객체가 열리지 않으므로 CSS 배경색을 사용할 수 없습니다. 해결 방법 세 가지 유형이 있는데, 그 중 하나는 float를 클리어로 설정하고, CSS 높이를 설정하고, CSS 오버플로 스타일을 설정하는 것입니다.

- 높이 제한으로 인해 배경색이 완전히 표시되지 않습니다. 높이를 계산하지 않은 개체가 있는 경우(또는 실수로 매우 작은 높이 속성 스타일을 설정한 경우) 콘텐츠가 얼마나 되는지 확실하지 않기 때문입니다. 콘텐츠가 설정한 높이 제한을 초과하는 경우, 이 때 배경의 일부가 표시되지 않을 수 있습니다. 높이를 충분히 높게 설정하거나 높이 스타일 삭제를 취소하세요.

사례:

<div style="width:960px;background-color:#000000">
    <div  style="width:300px; height:200px; float:left">左侧</div>
    <div  style="width:300px; height:200px; float:left">中部</div>
    <div  style="width:360px; height:200px; float:left">右侧</div>
</div>

외부 div의 높이가 설정되지 않았기 때문에 위 코드를 설정하면 투명한 상자 3개가 표시됩니다.

올바른 코드는 다음과 같습니다.

<div style="width:960px; height:200px;background-color:#000000">
    <div  style="width:300px; height:200px; float:left">左侧</div>
    <div  style="width:300px; height:200px; float:left">中部</div>
    <div  style="width:360px; height:200px; float:left">右侧</div>
</div>

CSS가 배경을 표시할 수 없으면 어떻게 해야 합니까?

관련 기사