2015-12-13 복습의 CSS3 배경 백그라운드 속성
2461 단어 CSS3
background-color(배경색)
background-image(배경 그림)
background-position(배경 그림 위치)
background-size (배경 그림 크기)
background-attachment (배경 그림이 고정되거나 페이지의 나머지 부분에 따라 굴러갈지 여부를 규정합니다.)
background-repeat (배경 그림 중복 형식)
background-origin (배경 그림의 위치를 지정합니다.)
background-clip (배경을 지정한 그림 영역)
background-color
더 이상 설명할 필요 없어요.background-image:
한 요소에 여러 배경 그림을 표시하여 그림 경로를 연속으로 쓸 수 있습니다.
background-image: url("bg.png"),url("2015.jpg"); ， ， 。background-position：
， ：background-position: right top,bottom left;background-size:
총 4개의 속성 값: 구체적인 픽셀 값, 백분율,cover,contain
구체적인 픽셀 값과 백분율은 모두 두 개의 값이 있는데, 두 번째 생략은 쓰지 않고 auto로 설정됩니다
cover 및 contain 은 다음과 같은 이점을 제공합니다.
만약 한 폭의 배경도가 길이가 비교적 길고 너비가 비교적 짧다고 가정한다면
cover 는 짧은 것 에 따라 축소하는 것 이다. 짧은 방향 으로 용기 를 채우면 된다. 이때 일부 그림 이 넘쳐 보이지 않을 수 없다
contain은 긴 크기에 따라 축소합니다. 긴 방향으로만 용기를 채우면 됩니다. 이 때 일부 공간은 배경도에 채워지지 않지만 기본값은 형식repeat입니다. 즉, 이 때 스타일은 중복됩니다.
background-attachment:
기본값은 스크롤입니다. 내용을 스크롤할 때 스크롤합니다.
속성 값이fixed일 때 배경 그림은 내용에 따라 스크롤되지 않습니다
background-repeat:
더 이상 설명할 필요도 없어요.
background-origin background-clip：css3의 백그라운드-origin과 백그라운드-clip의 차이와 관계를 상세히 보십시오
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Vue 엔지니어가 만든다】 절대 실패하지 않는 CSS 네비게이션 메뉴 정리 13선이 기사에 기재된 디자인 코드는 모두 자유롭게 사용해 주셔서 괜찮습니다 (필자가 작성했기 때문에) 프로젝트에 넣어보다 충실한 디자인으로 해 주면 ○ 움직임은 아래 이미지처럼 느껴집니다 1. 헤더로 사용하기 쉬운 간단...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
