问题描述
我有一个旋转木马,这个旋转木马上有一个带有透明背景的导航栏。旋转木马中的一张照片背面是白色,另一张是黑色的。导航栏中我的图标的颜色是黑色。我希望导航栏中的图标在从白色切换到黑色时显示为白色,我该怎么做?
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-->`
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) 50%);
background-image: -webkit-linear-gradient(bottom,rgb(0,0) 0%,0) 50%);
background: linear-gradient(bottom,0) 50%);
background: -moz-linear-gradient(bottom,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,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");
}
}
解决方法
不是一个完美的解决方案,但您可以使用 mix-blend-mode
CSS property 和一些过滤器。
我用 this playground 模拟您的轮播。我正在使用 mix-blend-difference contrast-125
类并将 text-white
设置为基色 - 它将是白色和相反的黑色。它适用于平坦的背景,但对于杂色的图像,我的猜测可能会很糟糕。