웹 페이지에 이미지를 한두 개 넣고 싶다고 가정 해 보겠습니다. 한 가지 방법은 background-imageCSS 속성 을 사용하는 것 입니다.
이 속성은 같은 요소에 하나 또는 그 이상의 배경 이미지를 적용 , 문서는 설명한다. 웹 페이지에 질감이있는 배경을 추가하는 것과 같은 미적 이유로 사용하십시오.
이미지 추가
background-image속성을 사용하여 이미지를 쉽게 추가 할 수 있습니다 . url()값에 이미지 경로를 제공하기 만하면 됩니다.
아래 예와 같이 이미지 경로는 URL이 될 수 있습니다.
div { /* Background pattern from Toptal Subtle Patterns */ background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"); height: 400px; width: 100%; } 또는 로컬 경로 일 수 있습니다. 예를 들면 다음과 같습니다.
body { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("./images/oriental-tiles.png"); } 여러 이미지 추가
background-image속성에 여러 이미지를 적용 할 수 있습니다 .
div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; background-position: right, left; } 그것은 많은 코드입니다. 그것을 분해합시다.
각 이미지 url()값을 쉼표로 구분하십시오.
background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); 이제 추가 속성을 적용하여 이미지를 배치하고 향상시킵니다.
background-repeat: no-repeat, no-repeat; background-position: right, left; 당신이 당신의 배경과 같은 이미지에 추가 할 수있는 몇 가지 하위의 호텔을 고를 수 있습니다 background-repeat그리고 background-position우리는 위의 예에서 사용. 배경 이미지에 그라디언트를 추가 할 수도 있습니다.
우리가 모든 것을 합 쳤을 때 어떻게 생겼는지보십시오.
주문 사항
스택 순서로 인해 이미지를 나열하는 순서가 중요합니다. 이는 문서에 따르면 나열된 첫 번째 이미지가 사용자에게 가장 가깝다는 것을 의미합니다. 그런 다음 다음, 다음 등등.
여기에 예가 있습니다.
div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; } 위의 코드에 두 개의 이미지가 나열되어 있습니다. 첫 번째 이미지 (morocco-blue.png)가 두 번째 이미지 (oriental-tiles.png) 앞에 있습니다. 두 이미지는 크기가 같고 불투명도가 부족하므로 첫 번째 이미지 만 표시됩니다.
그러나 두 번째 이미지 (oriental-tiles.png)를 오른쪽으로 200 픽셀 이동하면 일부를 볼 수 있습니다 (나머지는 숨겨진 상태로 유지됨).
우리가 모든 것을 합 쳤을 때의 모습입니다.
배경 이미지는 언제 사용해야합니까?
background-image속성 에 대해 좋아할 것이 많이 있습니다. 그러나 단점이 있습니다.
화면 판독기를 사용하는 사용자처럼 모든 사용자가 이미지에 액세스 할 수있는 것은 아닙니다.
background-image속성에 텍스트 정보를 추가 할 수 없기 때문 입니다. 결과적으로 화면 판독기에서 이미지가 누락됩니다.
background-image페이지에 장식을 추가해야하는 경우에만 속성을 사용 하세요. 그렇지 않은
alt이렇게하면 이미지를 설명하는 속성을 사용하여 이미지 요소에 텍스트를 추가 할 수 있습니다 . 제공된 텍스트는 스크린 리더에서 선택됩니다.
다음과 같이 생각해보십시오 background-image. CSS 속성이고 CSS는 프레젠테이션이나 스타일에 중점을 둡니다. HTML은 의미론이나 의미에 중점을 둡니다.
이미지와 관련하여 옵션이 있습니다. 장식용 이미지가 필요한 경우 해당 background-image속성이 좋은 선택이 될 수 있습니다.
나는 프로그램을 배우는 것과 그것에 대한 최선의 방법에 대해 글을 씁니다 ( amymhaddad.com).