当轮播中的图像发生变化时，导航栏中图标的颜色如何变化
Posted
技术标签:
【中文标题】当轮播中的图像发生变化时，导航栏中图标的颜色如何变化【英文标题】：how the color of the icons in the navbar change when the image in the carousel changes 【发布时间】：2021-09-12 18:38:53 【问题描述】：我有一个轮播，我在这个轮播上有一个带有透明背景的导航栏。轮播中的一张图片背面为白色，另一张为黑色。我在导航栏中的图标颜色是黑色的。我希望导航栏中的图标在从白色切换到黑色时为白色，我该怎么做？
html 代码：`
<div class="flex-1 flex justify-between items-center">
<a href="#" class="text-xl"><img src="assets/img/oblonglogo.png" class="w-1/2" ></a>
</div>
<label for="menu-toggle" class="cursor-pointer md:hidden block mr-4">
<svg class="fill-current text-gray-900" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<title>menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
</svg>
</label>
<input class="hidden" type="checkbox" id="menu-toggle" />
<div class="hidden md:flex md:items-center md:w-auto w-full lg:mr-40 bg-white md:bg-transparent h-full"
id="menu">
<nav class="h-full">
<ul
class="md:flex items-center justify-between text-base text-gray-700 pt-4 md:pt-0 h-full bg-white md:bg-transparent">
<li class="px-4 md:px-0 dropdown-item md:h-full md:flex md:items-center bg-white md:bg-transparent">
<a class="md:p-4 py-3 px-0 block menu-link" href="#">
Kurumsal
</a>
<ul class="menu-child p-3 pt-0 md:absolute bg-white md:shadow-2xl">
<li>
<a href="#">
Hakkımızda
</a>
</li>
<li>
<a href="#">
Blog
</a>
</li>
</ul>
</li>
<li class="px-4 md:px-0 dropdown-item md:h-full md:flex md:items-center bg-white md:bg-transparent">
<a class="md:p-4 py-3 px-0 block menu-link" href="#">
Ürün ve Hizmetler
</a>
<ul class="menu-child p-3 pt-0 md:absolute bg-white md:shadow-2xl">
<li>
<a href="#">
Üyelik Paketleri
</a>
</li>
<li>
<a href="#">
İleri Veri Analizi
</a>
</li>
<li>
<a href="#">
Üye Olmadan Reklam Vermek ?
</a>
</li>
</ul>
</li>
<li class="px-4 md:px-0 dropdown-item md:h-full md:flex md:items-center bg-white md:bg-transparent">
<a class="md:p-4 py-3 px-0 block menu-link" href="#">
Alıcılar
</a>
<ul class="menu-child p-3 pt-0 md:absolute bg-white md:shadow-2xl">
<li>
<a href="#">
Hizmet Paketleri ve Kullanım
</a>
</li>
<li>
<a href="#">
Tedarikçi Yönetimi ve Değerlendirme
</a>
</li>
</ul>
</li>
<li class="px-4 md:px-0 dropdown-item md:h-full md:flex md:items-center bg-white md:bg-transparent">
<a class="md:p-4 py-3 px-0 block menu-link md:mb-0 mb-2" href="#">
Tedarikçiler
</a>
<ul class="menu-child p-3 pt-0 md:absolute bg-white md:shadow-2xl">
<li>
<a href="#">
Hizmet Paketleri ve Kullanım
</a>
</li>
</ul>
</li>
<li class="px-4 md:px-0 md:h-full md:flex md:items-center bg-white md:bg-transparent">
<a class="md:p-4 py-3 px-0 block md:mb-0 mb-2 menu-link" href="#">
İletişim
</a>
</li>
</ul>
</nav>
</div>
<div class="hidden lg:flex gap-4 items-center justify-center">
<a href="#">
<i class="fa fa-search"></i>
</a>
<a href="#">
<i class="fa fa-user"></i>
</a>
<a>
<i onclick="rightbarOpen()" class="fa fa-bars fa-2x cursor-pointer"></i>
</a>
</div>
</header>
<!--Header-->
<!--Carousel-->
<div class="owl-carousel owl-theme relative">
<div class="item flex justify-center items-center"
style="background: url(/assets/img/carousel/1.webp)no-repeat center center;">
<div class="w-10/12 md:w-1/2 mx-auto text-center flex flex-col gap-6">
<h1 class="uppercase carousel-title ">Dijital Pazarlama ve Reklamcılık Çözümleri!</h1>
<h1 class="carousel-text text-white">Yurtdışındaki potansiyel müşterilerinizle tanışın!</h1>
<a
class="package-btn uppercase text-white px-4 py-2 cursor-pointer rounded-md flex items-center justify-center mx-auto w-48 h-12 fadeInUp">Hizmet
Paketleri</a>
</div>
</div>
<div class="item flex justify-center items-center"
style="background: url(/assets/img/carousel/2.webp)no-repeat center center">
<div class="w-10/12 md:w-1/2 mx-auto text-center flex flex-col gap-6">
<h1 class="uppercase carousel-title">Oblongmark.com</h1>
<h1 class="carousel-text text-white">İleri veri analitiği ile dünyanın her yerinde müşterilerinizi
bulun!</h1>
<a
class="package-btn uppercase text-white px-4 py-2 cursor-pointer rounded-md flex items-center justify-center mx-auto w-48 h-12 fadeInUp">Hizmet
Paketleri</a>
</div>
</div>
</div>
<!--Carousel-->`
CSS 代码：
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Rubik:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
body
background-color: #f9f8f8;
.active
color: #ff5421 !important;
#menu-toggle:checked + #menu
display: block;
#header
transition: 500ms height;
height: 104px;
z-index: 9998;
.menu-responsive
height: 90px !important;
background-color: white !important;
box-shadow: 1px 1px 40px;
.accordion__content
max-height: 0em;
transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
input[name="panel"]:checked
~ label
background-color: #ff5421;
color: white;
~ .accordion__content
max-height: 50em;
#right-menu
right: -450px;
width: 450px;
transition: all 500ms linear;
z-index: 9999;
div span
background-color: #ff5421;
color: white;
border: 0;
transform: rotate(0);
transition: 1s transform;
&:hover
cursor: pointer;
transform: rotate(360deg);
ul.social li a
transition: 500ms color;
&:hover
color: #ff5421;
i
font-size: 20px;
.font-rubik
font-family: "Rubik", sans-serif;
.font-nunito
font-family: "Nunito", sans-serif;
#menu > nav > ul > li a
&:hover
color: #ff5421 !important;
.menu-child
border-bottom: 5px solid #ff5421;
transition: max-height 2s, opacity 1s;
overflow: hidden;
opacity: 0;
top: 100%;
min-width: 200px !important;
max-height: 0 !important;
.dropdown-item
&:hover .menu-child
max-height: 500px !important;
opacity: 1 !important;
.menu-child li
margin-top: 20px;
.item
width: 100%;
height: 100vh;
background-size: cover !important;
.carousel-title
color: #ff4f19;
font-size: 22px;
animation: bounce 2s 2;
.carousel-text
font-size: 50px;
animation: bounce 2s 2;
.package-btn
background-color: #ff5421;
visibility: visible;
animation-duration: 2000ms;
animation-delay: 900ms;
animation-name: fadeInUp;
&:hover
background-color: #171f32;
.cards
bottom: 5%;
.card
background-color: #171f32;
color: white;
transition: 500ms margin ease-in-out;
> div.flex-1.flex.flex-col
:nth-child(1)
font-size: 22px;
font-weight: bold;
:nth-child(2)
font-size: 20px;
font-weight: 400;
&:hover
margin-top: -20px !important;
margin-bottom: 20px !important;
.card-xl
background: -webkit-linear-gradient(bottom, #000000 0%, rgba(0, 0, 0, 0) 50%);
background-image: -webkit-linear-gradient(bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%);
background: linear-gradient(bottom, #000000 0%, rgba(0, 0, 0, 0) 50%);
background-image: -webkit-linear-gradient(bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%);
background: -moz-linear-gradient(bottom, #000000 0%, rgba(0, 0, 0, 0) 50%);
background-image: -webkit-linear-gradient(bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%);
background-color: #031a3d;
transition: 500ms margin ease-in-out;
&:hover
margin-top: -20px !important;
margin-bottom: 20px !important;
> div.flex-1.flex.flex-col .fadeInUp
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
.packages
.package
.package-header
background-color: #031a3d;
.price
span
background-color: #ff5421;
color: white;
@media (max-width: 280px)
.card-footer
margin-top: 50px !important;
#systemUseIframe
min-height: 250px !important;
@media (min-width: 281px) and (max-width: 375px)
.card-footer
margin-top: 150px !important;
#systemUseIframe
min-height: 330px !important;
#packages
padding-left: 3rem;
padding-right: 3rem;
@media (min-width: 376px) and (max-width: 414px)
.card-footer
margin-top: 180px !important;
#systemUseIframe
min-height: 400px !important;
#packages
padding-left: 5rem;
padding-right: 5rem;
@media (min-width: 415px) and (max-width: 540px)
.card-footer
margin-top: 300px !important;
#systemUseIframe
min-height: 450px !important;
#packages
padding-left: 8rem;
padding-right: 8rem;
@media (max-width: 500px)
.card-content
font-size: 12px !important;
.card-footer
.title
font-size: 14px !important;
.text
font-size: 12px !important;
#systemUseIframe
min-height: 450px !important;
@media (min-width: 540px) and (max-width: 768px)
.menu-child
border: 0 !important;
.item
height: 84vh !important;
.carousel-title
font-size: 20px !important;
.carousel-text
font-size: 35px !important;
#header
background-color: white !important;
#systemUseIframe
min-height: 450px !important;
@keyframes bounce
0%
transform: scale(1, 1) translateY(0);
10%
transform: scale(1.1, 0.9) translateY(0);
30%
transform: scale(0.9, 1.1) translateY(-100px);
50%
transform: scale(1, 1) translateY(0);
100%
transform: scale(1, 1) translateY(0);
@keyframes fadeInUp
0%
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
100%
opacity: 1;
-webkit-transform: none;
transform: none;
JS 代码：
$('.owl-carousel').owlCarousel(
loop: false,
autoplay: false,
dots:false,
responsive:
0:
items: 1
)
let headerNav = document.getElementsByTagName("nav");
let headerLink = document.querySelectorAll(".menu-link");
for (var i = 0; i < headerLink.length; i++)
headerLink[i].addEventListener("click", function ()
var current = document.getElementsByClassName("active");
if (current.length > 0)
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
);
let header = document.getElementById("header");
window.onscroll = function () scrollFunction() ;
function scrollFunction()
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80)
header.classList.add("menu-responsive");
else
header.classList.remove("menu-responsive");
【问题讨论】：
【参考方案1】：不是一个完美的解决方案，但您可以使用mix-blend-mode CSS property 和一些过滤器。
我用this playground 模拟你的轮播。我正在使用mix-blend-difference contrast-125 类并将text-white 设置为基色-它将是白底黑字和相反的颜色。它适用于平坦的背景，但对于杂色的图像，我的猜测可能很糟糕。
【讨论】：
以上是关于当轮播中的图像发生变化时，导航栏中图标的颜色如何变化的主要内容，如果未能解决你的问题，请参考以下文章