>  기사  >  웹 프론트엔드  >  CSS의 배경 이미지 예에 대한 자세한 설명

CSS의 배경 이미지 예에 대한 자세한 설명

零下一度
零下一度원래의
2017-06-24 13:37:421083검색

몸의 배경 이미지 설정

유형 1: 이 경우 배경 이미지의 크기는 조정할 수 있지만 완전히 비례할 수는 없습니다.

background: url(imgs/1.jpg)no-repeat;

background-position:center0; 본체의 높이로 인해 배경 이미지의 위치 지정 출처가 불확실합니다

background-attachment: 고정; 배경 이미지는 고정된 상태로 유지되며 페이지가 스크롤될 때 스크롤되지 않습니다

두 번째: 이 경우 창 크기가 변경됨에 따라 배경 이미지의 크기가 완전히 조정됩니다.

첫 번째 설정 html 높이:100%;

본문 설정

배경: url(imgs/1.jpg) no-repeat;

배경 크기: 100% 00 % ; 배경 크기 값이 커버인 경우 한쪽이 창 가장자리에 닿는 한 중지됩니다. 이 경우 배경 이미지의 크기가 비례적으로 조정되지 않습니다.

body의 요소 너비와 높이가 100%가 되도록 하려면

첫 번째 방법:

먼저 html에 height:100%를 설정한 다음 너비를 설정합니다. :100%;height:100% 요소의 경우

두 번째 방법: 너비/높이를 100%로 설정하는 동안 위치:fixed;

페이지에서 입력을 사용하려면 다음이 필요합니다. 기본 테두리를 사용하면 나중에 js가 수정될 때 첫 번째 상호 작용 중에 약간의 픽셀 오프셋이 나타납니다. 재설정하는 것이 좋습니다

<

linkrel ="shortcut icon"

href

="imgs/favicon.ico" /> 에 이 문장을 넣고, html 웹페이지 제목의 작은 아이콘과 중간 아이콘을 수정하세요 html의 텍스트는 세로로 표시됩니다.텍스트 개체의 너비 설정은 아래쪽으로만 정렬할 수 있습니다. 텍스트의 너비 간격으로 인해 텍스트가 한 줄에 두 문자를 넣을 수 없으므로 텍스트가 자동으로 줄 바꿈하여 수직 조판 요구 사항을 형성합니다

이때 CSS 단어에

word-wrap:break-를 추가해야 합니다. 이 두 문장은 구두점과 줄 바꿈과 동시에 전체 수직 표시

writing-mode: 개체의 쓰기 방향을 설정합니다. 두 가지 값이 있습니다.

1.lr-tb: 왼쪽에서 오른쪽으로, 위에서 아래로,

2. tb-rl: 위에서 아래로, 오른쪽에서 왼쪽으로

코드를 실행해보니 IE는 정상적으로 표시되는데 Firefox와 Google Chrome에서는 지원되지 않습니다. 이므로 쓰기 모드 속성을 사용하지 않는 것이 좋습니다

위 내용은 CSS의 배경 이미지 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.