차례:
비디오: HTML - 비디오 삽입 2024
img 태그를 사용하여 HTML5 페이지에 이미지를 추가 할 수 있지만 이미지를 특정 요소 또는 전체 페이지의 배경으로 사용하려는 경우가 있습니다. 배경 이미지 CSS 규칙을 사용하여 배경 이미지를 페이지 또는 페이지의 요소에 적용 할 수 있습니다.
배경 이미지는 적용하기 쉽습니다. backgroundImage의 코드입니다. html은 다음을 보여줍니다:
backgroundImage. html body {background-image: url ("ropeBG.jpg");} h1 {background-image: url ("ropeBGLight.jpg");} p {background-color: white; background-color: rgba (255, 255, 255,.85);}
배경 이미지 사용
제목은 더 밝은 버전의 배경을 사용하고 단락은 밝은 색상의 단색 배경을 사용합니다.
제목에서 밝은 배경의 배경을 사용하고 단락은 밝은 색상의 단색 배경을 사용합니다.
적절한 이미지를 찾거나 작성하여 페이지와 같은 디렉토리에 배치하면 쉽게 찾을 수 있습니다.
-
이미지를 적용 할 페이지에 배경 이미지 스타일 규칙을 첨부하십시오.
-
이미지를 전체 페이지에 적용하려면 요소를 사용하십시오.
CSS에 url 식별자를 추가하여 백그라운드 이미지가 어디에 있는지 알려줍니다.
-
url () 키워드를 사용하여 다음 항목이 주소임을 나타냅니다.
이미지의 주소를 입력하십시오.
-
이미지가 페이지와 동일한 디렉토리에 있으면 가장 쉽습니다. 이 경우 이미지 이름을 입력하기 만하면됩니다. URL을 따옴표로 묶어야합니다.
브라우저에서 웹 페이지를보고 배경 이미지를 테스트하십시오.
-
많은 배경 이미지로 인해 잘못 될 수 있습니다. 이미지가 올바른 디렉토리에 없거나 이름의 철자가 잘못되었거나 비트를 잊어 버렸을 수 있습니다.
배경 확인하기
배경을 추가하는 것은 꽤 쉽지만 배경 이미지는 완벽하지 않습니다. 멋진 배경을 가진 페이지입니다. 불행하게도이 텍스트는 읽기가 어렵습니다.
배경 이미지는 많은 페이지를
추가 할 수 있지만 배경 이미지로 파일 크기를 추가 할 수있는 등의 문제가 발생할 수 있습니다.
-
이미지가 매우 크기 때문에 큰 배경 이미지를 사용하면 페이지를 훨씬 더 크게 만들거나 다운로드하기가 더 어려워 질 수 있습니다. 일부 이미지는 페이지를 읽기 어려워 질 수 있습니다.
-
배경 이미지가 텍스트와 간섭 할 수 있으므로 페이지를 읽기가 훨씬 어려울 수 있습니다. 좋은 이미지는 좋은 배경을 만들지 않습니다.
-
좋은 그림이 눈을 끈다. 배경 이미지의 작업은 배경으로 희미 해지는 것입니다. 사람들이 그림을 보길 원하면 그림을 삽입하십시오. 배경 이미지가 포 그라운드로 점프해서는 안됩니다. 배경은 대비가 낮아야합니다.
-
배경 이미지가 어두우면 밝은 텍스트를 볼 수있게 할 수 있습니다. 배경 이미지가 밝은 경우 어두운 텍스트가 표시됩니다. 이미지에 밝은 부분과 어두운 부분 (거의 모든 좋은 이미지와 같이)이있는 경우 텍스트 색상이 좋지 않을 수 있습니다.
