사용자 정의 속성으로 여러 배경을 관리합니다

CSS 사용자 정의 속성의 장점 중 하나는 값의 구성 요소로 사용할 수 있다는 것입니다. 디자인 효과를 달성하기 위해 여러 배경을 사용하고 있다고 가정합니다. 각 배경에는 색상, 이미지, 반복, 위치 등과 같은 고유 한 속성이 있으며, 이는 장황 코드로 이어질 수 있습니다!

네 가지 이미지가 있다고 가정합니다.

 몸 {
  배경 위치 : 상위 10px 왼쪽 10px, 상단 10px 오른쪽 10px, 하단 10px 오른쪽 10px, 하단 10px 왼쪽 10px;
  배경 반복 : 비 반복;
  배경-이미지 : URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg), URL (https://s3-us-west-2.amazonaws.com/s.s.cdpn.io/3/angles-bottom.svg), url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg), url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg);
}

이제 미디어 쿼리에 다섯 번째 배경을 추가하려고합니다.

 @Media (min-width : 1500px) {
  몸 {
    /* 기존의 모든 배경을 반복하고 다섯 번째 배경을 추가하십시오. */
  }
}

이것은 매우 장점이 될 것입니다! 네 개의 이미지를 다시 반복하고 다섯 번째 이미지를 추가해야합니다. 많은 코드 복제!

한 가지 방법은 기본 배경 세트의 변수를 작성한 다음 다섯 번째 배경을 더 간결하게 추가하는 것입니다.

 몸 {
  -Basebackgrounds : URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg), URL (https://s3-us-west-2.amazonaws.com/s.c.s.cdpn.io/3/angles-bottom-right.svg), url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg), url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg);
  배경 위치 : 상위 10px 왼쪽 10px, 상단 10px 오른쪽 10px, 하단 10px 오른쪽 10px, 하단 10px 왼쪽 10px;
  배경 반복 : 비 반복;
  배경 이미지 : var (-베이스 백 그라운드);
}
@Media (min-width : 1500px) {
  몸 {
    백그라운드 이미지 : var (-Basebackgrounds), URL (추가 된 5 번가 .svg);
  }
}

또는 각 배경 이미지에 대한 변수를 만들고 필요에 따라 함께 그룹화 할 수 있으며, 이는 더 명확하고 관리하기 쉬울 수 있습니다.

 몸 {
  ---bg1 : url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg);
  ---bg2 : url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-right.svg);
  ---bg3 : url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg);
  ---bg4 : url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg);
  ---bg5 : url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg);
  배경 이미지 : var (-bg1), var (-bg2), var (-bg3), var (-bg4);
}
@Media (min-width : 1500px) {
  몸 {
    배경 이미지 : var (-bg1), var (-bg2), var (-bg3), var (-bg4), var (-bg5);
  }
}

다음은 지원 쿼리가 포함 된 기본 버전입니다.

값의 특정 부분을 동적으로 변화시키는 것은 CSS 사용자 정의 속성의 큰 장점입니다!

또한 배경의 경우 전체 약어를 변수로 포함시키는 것이 가장 좋습니다. 이렇게하면 다음과 같이 할 필요없이 모든 것을 한 번에 쉽게 정리할 수 있습니다.

 ---bg_1_url : url ();
---bg_1_size : 100px;
-BG_1_REPEAT : No-Repeat;
/* 등. */

모든 속성을 약어에 넣고 필요에 따라 사용하는 것이 더 쉬울 것입니다.

 몸 {  
  ---bg_1 : URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg) 상위 10px 왼쪽 10px/86px no-Repeat;
  ---bg_2 : URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-right.svg) 상위 10px 오른쪽 10px/86px no-Repeat;
  ---bg_3 : URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg) 하단 10px 오른쪽 10px/86px no-repeat;
  ---bg_4 : URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg) 하부 10px 왼쪽 10px/86px no-repeat;

  배경 : var (-bg_1), var (-bg_2), var (-bg_3), var (-bg_4);
}

그게 다야.

위 내용은 사용자 정의 속성으로 여러 배경을 관리합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!