堆栈内存溢出
  繁体   English   中英

当轮播中的图像发生变化时，导航栏中图标的颜色如何变化

[英]how the color of the icons in the navbar change when the image in the carousel changes

 原文  2021-06-30 15:21:50  9   1    javascript/ html/ sass/ tailwind-css/ owl-carousel

问题描述

我有一个旋转木马，这个旋转木马上有一个带有透明背景的导航栏。 旋转木马中的一张照片背面是白色，另一张是黑色的。 导航栏中我的图标的颜色是黑色。 我希望导航栏中的图标从白色切换到黑色时为白色，我该怎么做？

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" alt=""></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" width="20" height="20"
            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-->`

代码：

@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 个解决方案

解决方案1
 0  2021-06-30 17:54:13

不是一个完美的解决方案，但您可以使用mix-blend-mode CSS属性和一些过滤器。

我用这个游乐场模拟你的旋转木马。 我正在使用mix-blend-difference contrast-125类并将text-white设置为基色 - 它将是白色和相反的黑色。 它适用于平坦的背景，但对于杂乱无章的图像，我的猜测可能非常糟糕。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 幻灯片更改时更改Bootstrap的轮播箭头颜色 滚动到底部时如何更改导航栏的颜色？ 当 Navbar 在不同的组件中呈现时，如何更改 Navbar 中文本的颜色？ 将鼠标悬停在导航栏中的元素上时如何更改整个导航栏颜色 当背景图像改变时改变菜单颜色 在 NavLink 中活动时如何更改图标图像？ 如何在引导程序中修复导航栏和旋转木马图像滑块 单击栏并更改图标颜色时如何激活导航栏 当导航栏变粘时，如何更改 li 颜色？ 用户滚动时如何更改导航栏的标题颜色？ Prestashop
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM