CSS로 기법 실행하기
웹 사이트를 디자인하는 경우 고정 된 배경 이미지 또는 웹 페이지에 워터 마크를 만드는 방법을 배우는 데 관심이있을 수 있습니다. 이것은 꽤 오랫동안 온라인으로 널리 사용 되어온 일반적인 디자인 치료법입니다. 그것은 귀하의 웹 디자인 트릭 가방에 가지고있는 편리한 효과입니다.
이전에이 작업을 수행하지 않았거나 이전에 운을 시험해 본 적이 없다면이 프로세스는 위협적으로 보일 수 있지만 사실 전혀 어렵지 않습니다. 이 간단한 튜토리얼을 통해 CSS를 사용하여 몇 분 만에 기술을 마스터하는 데 필요한 정보를 얻을 수 있습니다.
시작하기
배경 이미지 또는 워터 마크 (실제로는 매우 밝은 배경 이미지 임)에는 인쇄 된 디자인의 이력이 있습니다. 문서에는 오랫동안 복사 방지를 위해 워터 마크가 포함되어 있습니다. 또한 많은 전단지 및 브로셔는 인쇄물 디자인의 일부로 큰 배경 이미지를 사용합니다. 웹 디자인은 오랫동안 인쇄물에서 스타일을 빌려 왔고 배경 이미지는 이러한 빌린 스타일 중 하나입니다.
이러한 큰 배경 이미지는 다음 세 가지 CSS 스타일 속성을 사용하여 쉽게 만들 수 있습니다.
- 배경 이미지
- 배경 반복
- 배경 부착
- 배경 크기
배경 이미지
배경 이미지를 사용하여 워터 마크로 사용할 이미지를 정의합니다. 이 스타일은 단순히 파일 경로를 사용하여 사이트에있는 이미지 ( "이미지"라는 디렉토리에 있음)를로드합니다.
background-image : url (/images/page-background.jpg);
이미지 자체가 보통 이미지보다 가볍거나 투명 해지는 것이 중요합니다. 이렇게하면 반투명 이미지가 텍스트, 그래픽 및 웹 페이지의 다른 주요 요소 뒤에있는 "워터 마크"모양이 만들어집니다. 이 단계가 없으면 배경 이미지가 페이지의 정보와 경쟁하여 읽을 수 없게됩니다.
Adobe Photoshop과 같은 편집 프로그램에서 배경 이미지를 조정할 수 있습니다.
배경 반복
background-repeat 속성이 다음에옵니다. 이미지가 워터 마크 스타일의 큰 그래픽으로 나타나게하려면이 속성을 사용하여 해당 이미지를 한 번만 표시되도록합니다.
background-repeat : no-repeat;
"반복 없음"속성이 없으면 기본값은 이미지가 페이지에서 반복해서 반복된다는 것입니다. 이는 대부분의 현대 웹 페이지 디자인에서 바람직하지 않으므로이 스타일은 CSS에서 필수적인 것으로 간주되어야합니다.
배경 첨부
배경 부착은 많은 웹 디자이너가 잊어 버릴 수있는 속성입니다. "고정"속성을 사용하면 배경 이미지가 고정됩니다. 이 이미지를 페이지에서 고정 된 워터 마크로 바꾸는 것은 바로 그 것입니다.
이 속성의 기본값은 "스크롤"입니다. 배경 부착 값을 지정하지 않으면 백그라운드가 나머지 페이지와 함께 스크롤됩니다.
배경 부착 : 고정;
배경 크기
background-size는 새로운 CSS 속성입니다. 그것은보고있는 뷰포트를 기반으로 배경의 크기를 설정할 수있게 해줍니다. 이것은 다른 장치 에서 다른 크기로 표시되는 반응 형 웹 사이트에 매우 유용 합니다 .
background-size : 표지;
이 속성에 사용할 수있는 두 가지 유용한 값은 다음과 같습니다.
- Cover - 전체 너비 또는 전체 높이가 표시되도록 배경의 배율을 조정합니다. 즉, 이미지의 일부가 화면에 나타나지 않을 수도 있지만 전체 영역이 덮히게됩니다.
- 포함 - 전체 너비와 높이가 스타일이 적용되는 영역에 표시되도록 이미지의 크기를 조정합니다. 이미지가 잘리는 것은 아니지만 부분적인 부분은 이미지로 덮히지 않을 수 있습니다.
페이지에 CSS 추가하기
위의 속성과 값을 이해하고 나면이 스타일을 웹 사이트에 추가 할 수 있습니다.
단일 페이지 사이트를 만드는 경우 웹 페이지의 HEAD에 다음을 추가하십시오. 다중 페이지 사이트를 만들고 외부 시트의 기능을 활용하려는 경우 외부 스타일 시트의 CSS 스타일에 추가하십시오.
<스타일>
몸 {
background-image : url (/images/page-background.jpg);
background-repeat : no-repeat;
배경 부착 : 고정;
background-size : 표지;
}
// ->
사이트와 관련된 특정 파일 이름 및 파일 경로와 일치하도록 배경 이미지 의 URL을 변경하십시오. 디자인에 맞게 다른 적절한 변경을하면 워터 마크가 생깁니다.
위치를 지정할 수도 있습니다.
웹 페이지의 특정 위치에 워터 마크를 배치하려는 경우에도 그렇게 할 수 있습니다. 예를 들어 워터 마크를 페이지 중앙이나 하단 구석에 표시 할 수 있습니다 (기본값 인 상단 구석과 반대).
이렇게하려면 스타일에 background-position 속성을 추가하십시오. 이렇게하면 정확한 위치에 이미지가 표시됩니다. 픽셀 값, 백분율 또는 정렬을 사용하여 위치 지정 효과를 얻을 수 있습니다.
배경 위치 : 중심;