최고의 CSS의 배경 (배경) 튜토리얼 2024년, 이 튜토리얼에서는 배경 색상,예,예,배경 이미지,예,예,배경 이미지 - 가로 또는 세로 바둑판 식 배열,예,예,배경 이미지 - 설정 위치가 아닌 타일,예,예,배경 - 약식 속성,예,더 많은 예제,CSS 배경 속성,를 배울 수 있습니다.
CSS 배경 속성은 HTML 요소의 배경을 정의하는 데 사용됩니다.
CSS 속성은 배경 효과를 정의
배경 컬러 속성은 요소의 배경색을 정의한다.
페이지 배경색 본체 선택기 사용 :
CSS는 색상 값은 일반적으로 다음과 같이 정의된다 :
다음의 예, H1, P, 및 DIV 요소는 서로 다른 배경색을 가지고
배경 이미지 속성은 배경 이미지 요소를 설명한다.
기본적으로 배경 화상을 반복하여 전체 소자 엔티티를 덮도록 바둑판 표시된다.
페이지의 배경 이미지 설정 예 :
여기서 텍스트와 배경 이미지의 잘못된 조합의 일례이다. 가난한 가독성을 텍스트 :
기본적으로 배경 이미지 속성은 페이지의 수평 또는 수직 방향으로 바둑판 식으로 배열된다.
일부 이미지는 가로와 세로 바둑판 식으로 배열, 그래서 다음과 같이이 매우 조화 보이는 경우 :
수평 방향으로 만 화상 타일 (반복-X)을 페이지 배경 좋을 경우 :
배경 이미지는 텍스트 레이아웃에 영향을주지 않는하자
이 이미지 타일을하지 않으려면, 당신은 배경 반복 속성을 사용할 수 있습니다 :
위의 예에서, 배경 이미지 및 텍스트가 동일한 위치에 표시하는 페이지 레이아웃이 합리적하게하기 위해, 텍스트의 판독에 영향을주지 않고, 우리는 이미지의 위치를 변경할 수있다.
배경 포지션 속성은 여기에 배경 이미지를 변경하는데 사용될 수있다 :
위의 예에서, 우리는 제어 많은 속성을 통해 페이지의 배경색을 볼 수있다.
이러한 속성에 대한 코드를 단순화하기 위해, 우리는 이러한 특성이 동일한 속성에 결합되어 사용할 수 있습니다.
은 "배경"에 대한 약식 속성 배경 색상 :
속기 속성을 사용하는 경우, 특성 값의 순서 등 ::
이러한 모든 속성은 해당 페이지의 실제 필요에 따라 사용할 수 있으며, 사용할 필요가 없습니다.
이 예는 인스턴스를 볼 수 있습니다, CSS는 이전에 기술 사용 CSS 예를
고정 된 배경 이미지를 설정하는 방법
이 예는 고정 된 배경 이미지를 설정하는 방법을 보여줍니다. 이미지는 페이지의 나머지 부분과 스크롤되지 않습니다.
Property | 描述 |
---|---|
background | 简写属性,作用是将背景属性设置在一个声明中。 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
background-color | 设置元素的背景颜色。 |
background-image | 把图像设置为背景。 |
background-position | 设置背景图像的起始位置。 |
background-repeat | 设置背景图像是否及如何重复。 |