내비게이션 바의 Fontawesome 아이콘에서 배경색 불일치 문제 해결

이 튜토리얼은 Fontawesome 아이콘을 사용하여 내비게이션 막대를 구축 할 때 아이콘 배경색이 부모 요소 배경색과 일치하지 않는다는 문제를 해결하는 것을 목표로합니다. 글로벌 배경 색상 설정이 존재하면 아이콘이 상위 링크의 배경을 올바르게 상속받지 못할 수 있습니다. 이 기사는 두 가지 효과적인 CSS 솔루션을 제공합니다. 하나는 아이콘 배경을 투명하게 설정하여 부모 요소의 배경을 드러내는 것입니다. 다른 하나는 시각적 일관성을 보장하기 위해 아이콘 요소에 대한 상위 링크와 동일한 배경색을 명시 적으로 적용하는 것입니다.

최신 웹 디자인에서 내비게이션 바는 필수 불가결 한 부분이며 FontaWesome과 같은 아이콘 라이브러리는 편의성과 미학으로 인해 내비게이션 링크의 시각적 효과를 향상시키는 데 사용됩니다. 그러나 개발자가 Fontawesome 아이콘이있는 탐색 막대를 구현할 때 때때로 일반적인 시각적 문제가 발생합니다. 탐색 항목이 활성화되거나 마우스가 마우스를 떠날 때 아이콘 자체의 배경색이 상위 링크의 배경색과 일치하지 않지만 대신 시각적 불일치가 표시됩니다.

문제의 근본 원인 분석

이 문제의 핵심은 일반적으로 CSS 및 선택기 우선 순위의 상속 메커니즘입니다. 각 내비게이션 항목이 태그가있는 일반적인 아이콘 탐색 표시 줄 구조를 고려하십시오.

 <link rel="Stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

<div class="icon-bar">
  <a href="#" class="active"> <i class="fa fa-home"> </i> <br> início </a>
  <a href="#"> <i class="fa fa-user"> </i> <br> sobre </a>
  <a href="#"> <i class="fa fa-list"> </i> <br> serviços </a>
  <a href="#"> <i class="fa fa-money"> </i> <br> preços </a>
</div>

동시에 CSS에는 * 선택기를 사용하여 모든 요소의 기본 배경색 설정과 같은 전역 스타일 규칙이있을 수 있습니다.

 * {
    색상 : 흰색;
    텍스트 정렬 : 센터;
    Font-Family : Helvetica;
    배경색 : RGB (50, 50, 50); /* 글로벌 배경 색상*/
}

.icon-bar a의 호버 또는 .active state의 배경색을 설정할 때 : 예를 들어.

 .icon-bar a : 호버 {
  배경색 : #000; /* 배경 색상 호버*/
}

.활동적인 {
  배경색 : #04AA6D; /* 배경 색상 활성화*/
}

요소는 올바른 배경색을 가져 오지만 내부의 요소 (즉, Fontawesome 아이콘)는 여전히 전역의 배경색을 상속받을 수 있습니다 : RGB (50, 50, 50); 부모의 특정 배경색 대신 요소입니다. 이는 요소 자체가 블록 레벨 또는 인라인 블록 레벨 요소이며 자체 배경을 가지며 배경색은 전역 규칙 또는 이전 규칙에 의해 설정 될 수 있으며, 상위 요소의 배경색은 자식 요소에 직접 "침투"하지 않습니다.

솔루션 1 : 아이콘 배경을 투명으로 설정하십시오

가장 직접적이고 간결한 솔루션은 요소의 배경을 투명하게 명시 적으로 설정하는 것입니다. 이런 식으로, 요소는 더 이상 배경색을 표시하지 않지만 부모 요소의 배경색이 드러날 수 있습니다.

구현 방법

배경 설정 : 투명; CSS 규칙을 추가하여 .icon-bar 내의 요소의 경우.

샘플 코드

 /* 기존 글로벌 스타일 및 내비게이션 바 스타일*/
* {
  색상 : 흰색;
  텍스트 정렬 : 센터;
  Font-Family : Helvetica;
  배경색 : RGB (50, 50, 50); /* 문제를 일으킬 수있는 글로벌 배경색*/
}

.icon-bar {
  너비 : 100%;
  배경색 : #555;
  오버플로 : 자동;
}

.Icon-bar a {
  플로트 : 왼쪽;
  너비 : 25%;
  패딩 : 12px 0;
  전환 : 모든 0.3 초의 용이성;
  색상 : 흰색;
  글꼴 크기 : 20px;
  텍스트 결정 : 없음;
}

.icon-bar a : 호버 {
  배경색 : #000;
}

.활동적인 {
  배경색 : #04AA6D;
}

/* 솔루션 1 : 아이콘 배경을 투명하게 설정*/
.icon-bar i {
  배경 : 투명;
}

이점

• 단순성 : 문제를 해결하기 위해 CSS 라인을 추가하십시오.
• 유연성 : 대부분의 경우 아이콘 자체에는 특정 배경색이 필요하지 않습니다.

주목해야 할 것

• 이 규칙이 요소에 대한 비 배경 배경을 설정할 수있는 모든 스타일을 다루기에 충분한 우선 순위를 갖도록하십시오.

솔루션 2 : 아이콘에 상위 요소와 동일한 배경색을 적용하십시오.

또 다른 접근법은 요소가 다음과 같은 경우 동일한 배경색을 동기화하도록 요소의 배경색을보다 명시 적으로 제어하는 ​​것입니다. 이것은 선택기를 결합하여 달성됩니다.

구현 방법

요소에 대한 호버 및 .Active 상태의 배경색을 설정할 때이 스타일을 그 안의 요소에 적용하십시오.

샘플 코드

 /* 기존 글로벌 스타일 및 내비게이션 바 스타일*/
* {
  색상 : 흰색;
  텍스트 정렬 : 센터;
  Font-Family : Helvetica;
  배경색 : RGB (50, 50, 50); /* 문제를 일으킬 수있는 글로벌 배경색*/
}

.icon-bar {
  너비 : 100%;
  배경색 : #555;
  오버플로 : 자동;
}

.Icon-bar a {
  플로트 : 왼쪽;
  너비 : 25%;
  패딩 : 12px 0;
  전환 : 모든 0.3 초의 용이성;
  색상 : 흰색;
  글꼴 크기 : 20px;
  텍스트 결정 : 없음;
}

/* 솔루션 2 : 링크와 아이콘의 배경색 설정 동시에*/
.Icon-bar a : 호버, .icon-bar a : 호버 i {
  배경색 : #000; /* 배경 색상 호버*/
}

.Active, .Active i {
  배경색 : #04AA6D; /* 배경 색상 활성화*/
}

이점

• 정확한 제어 : 아이콘과 상위 요소 배경색 사이의 엄격한 일관성을 보장하며, 복잡한 상속 또는 특정 시나리오에서도 더 신뢰할 수 있습니다.
• 예측 가능성 : 각 요소의 배경 동작이 명시 적으로 지정됩니다.

주목해야 할 것

• 특정 배경색 (예 : 호버, .active)이 필요한 각 상태에 대한 요소에 대한 스타일 정의를 추가해야하므로 CSS 코드에서 약간의 중복성이 발생할 수 있습니다.
• 이 방법은 또한 글로벌 또는 기타 기본 스타일을 무시하기에 우선 순위가 충분해야합니다.

요약 및 모범 사례

Fontawesome 아이콘이있는 탐색 표시 줄을 구축 할 때 아이콘 배경색이 상위 요소와 일치하지 않는 문제는 일반적인 CSS 레이아웃 문제입니다. CSS 상속 규칙 및 선택기 우선 순위를 이해하는 것이 이러한 문제를 해결하는 데 핵심입니다.

• * 조심스럽게 Global``선택기를 사용하십시오 : ** 일반적인 스타일을 신속하게 설정할 수 있지만 실수로보다 구체적인 요소 스타일을 덮어 쓰거나 방해 할 수도 있으므로 버그가 어려워 질 수 있습니다.
• 올바른 해결책을 선택하십시오.
  • 대부분의 간단한 경우, 솔루션 1 (배경 : 투명;) 이 단순성을위한 첫 번째 선택입니다.
  • 더 많은 세분화 된 제어가 필요하거나 투명한 배경이 특정 시나리오에서 요구를 충족시킬 수없는 경우 솔루션 2 (아이콘의 배경을 명확하게 설정)는 더 명확한 제어를 제공합니다.
• 테스트 및 호환성 : 어떤 옵션을 선택하든 다양한 브라우저 및 장치에서 완전히 테스트하여 내비게이션 바가 다양한 환경에서 예상되는 시각적 효과 및 기능을 유지하도록해야합니다.

위의 두 가지 방법을 통해 Fontawesome 아이콘의 탐색 표시 줄에서 배경 색상 불일치 문제를 효과적으로 해결하여 사용자 인터페이스의 전문성과 일관성을 향상시킬 수 있습니다.

위 내용은 내비게이션 바의 Fontawesome 아이콘에서 배경색 불일치 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!