z-index表示元素出现的z平面上的顺序。堆栈顺序较高的元素始终位于堆栈顺序较低的另一个元素的前面。它在大多数GUI框架（Web和桌面）中都可用。
在我的角度项目中，我从aitboudad/ngx-loading-bar添加了ngx-loading-bar，（我安装了http-client包），这是我的app.component.html： 在我的角度项目中，我添加了来自 aitboudad/ngx-loading-bar 的 ngx-loading-bar（我安装了 http-client 包），这是我的 app.component.html: <div class="main-comp"> <ngx-loading-bar [color]="'#74ffff'" [includeSpinner]="false" [height]="'3px'" ></ngx-loading-bar> <header> ...header content... </header> <main id="main-content"> <router-outlet></router-outlet> </main> <footer id="footer-content"> ...footer content... </footer> </div> 现在我需要添加一个黑色全屏元素来阻止用户在加载程序出现时按下任何按钮。我使用了以下 scss 代码： ::ng-deep{ .ngx-bar{ z-index: 100; &::after{ content: ""; display: block; width: 100vw; height: 100vh; background-color: #00000066; position: fixed; top: 0; left: 0; } } } 这确实在屏幕中的所有元素前面显示了半不透明的黑色 div，但不幸的是 - 这并不能阻止点击元素！即使我将颜色更改为完全 black 或任何不透明颜色 - 我仍然看到光标更改为指针并在这种情况下单击 - 导致操作和 http 请求。 有什么问题吗？我尝试提供高 z-index，并将位置从 fixed 更改为 absolute - 没有帮助。我还怀疑这可能是伪元素问题，所以我删除了 ::after 并尝试为加载器 div 本身提供完整大小 - 相同的结果！ 我将不胜感激任何建议！ 将我的评论作为答案，我认为问题是:after选择器没有按您的预期工作。您可以了解有关后选择器的更多信息这里 基本上，要达到您想要的结果，您可以将 ngx-loading-bar 组件包装在 div 上并使用类设置样式。 CSS .loadbar-bg { display: block; width: 100vw; height: 100vh; background-color: #00000066; position: fixed; top: 0; left: 0; pointer-events: none; } HTML <div class="main-comp"> <div class="loadbar-bg" > <ngx-loading-bar [color]="'#74ffff'" [includeSpinner]="false" [height]="'3px'" ></ngx-loading-bar> </div> <header> ...header content... </header> <main id="main-content"> <router-outlet></router-outlet> </main> <footer id="footer-content"> ...footer content... </footer> </div>
<div> </div> <pre><code><html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <title>Game Cards App</title> <link rel="icon" type="image/png" href="https://cdn1.iconfinder.com/data/icons/entertainment-events-hobbies/24/card-game-cards-hold-512.png"> <style> .card-partially-visible { pointer-events: none; } #main-content { display: none; } * { box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-flow: column wrap; background: radial-gradient(circle, rgba(7, 50, 22, 255) 0%, rgba(0, 0, 0, 255) 100%); animation: shine 4s linear infinite; color: white; font-family: "Lato"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ul { margin: 0; padding: 0; list-style-type: none; max-width: 800px; width: 100%; margin: 0 auto; padding: 15px; text-align: center; overflow-x: hidden; } .card { float: left; position: relative; width: calc(33.33% - 30px + 9.999px); height: 340px; margin: 0 30px 30px 0; perspective: 1000; } .card:first-child .card__front { background:#5271C2; } .card__front img { width: 100%; height: 100%; object-fit: cover; } .card:first-child .card__num { text-shadow: 1px 1px rgba(52, 78, 147, 0.8) } .card:nth-child(2) .card__front { background:#35a541; } .card:nth-child(2) .card__num { text-shadow: 1px 1px rgba(34, 107, 42, 0.8); } .card:nth-child(3) { margin-right: 0; } .card:nth-child(3) .card__front { background: #bdb235; } .card:nth-child(3) .card__num { text-shadow: 1px 1px rgba(129, 122, 36, 0.8); } .card:nth-child(4) .card__front { background: #db6623; } .card:nth-child(4) .card__num { text-shadow: 1px 1px rgba(153, 71, 24, 0.8); } .card:nth-child(5) .card__front { background: #3e5eb3; } .card:nth-child(5) .card__num { text-shadow: 1px 1px rgba(42, 64, 122, 0.8); } .card:nth-child(6) .card__front { background: #aa9e5c; } .card:nth-child(6) .card__num { text-shadow: 1px 1px rgba(122, 113, 64, 0.8); } .card:last-child { margin-right: 0; } .card__flipper { cursor: pointer; transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); border: 3.5px solid rgba(255, 215, 0, 0.6); background-image: linear-gradient(45deg, rgba(255, 215, 0, 0.5), transparent, rgba(255, 215, 0, 0.5)); } .card__front, .card__back { position: absolute; backface-visibility: hidden; top: 0; left: 0; width: 100%; height: 340px; } .card__front { transform: rotateY(0); z-index: 2; overflow: hidden; } .card__back { transform: rotateY(180deg) scale(1.1); background: linear-gradient(45deg, #483D8B, #301934, #483D8B, #301934); display: flex; flex-flow: column wrap; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .card__back span { font-weight: bold; /* Metni kalın yap */ color: white; /* Beyaz renk */ font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .card__name { font-size: 32px; line-height: 0.9; font-weight: 700; } .card__name span { font-size: 14px; } .card__num { font-size: 100px; margin: 0 8px 0 0; font-weight: 700; } @media (max-width: 700px) { .card__num { font-size: 70px; } } @media (max-width: 700px) { .card { width: 100%; height: 290px; margin-right: 0; float: none; } .card .card__front, .card .card__back { height: 290px; overflow: hidden; } } /* Demo */ main { text-align: center; } main h1, main p { margin: 0 0 12px 0; } main h1 { margin-top: 12px; font-weight: 300; } .fa-github { color: white; font-size: 50px; margin-top: 8px; } .tm-container { display: flex; justify-content: center; align-items: center; } .tm-letter { display:inline-block; font-size:30px; margin: 0 5px; margin-top: 10px; opacity: 0; transform: translateY(0); animation: letter-animation 6s ease-in-out infinite; } @keyframes letter-animation { 0%, 100% { opacity: 1; transform: translateY(0); } 10%, 40%, 60%, 90% { opacity: 1; transform: translateY(-10px); } 20%, 80% { opacity: 1; transform: translateY(0); } } #m-letter { animation-delay: 1.5s; } a { position: relative; display: inline-block; padding: 0px; } a::before { content: ''; position: absolute; top: 50%; /* Orta konumu */ left: 50%; /* Orta konumu */ transform: translate(-50%, -50%); width: 50px; height: 45px; border-radius: 50%; /* Eğer bir daire şeklinde efekt isteniyorsa */ box-shadow: 0 0 8px 4px rgba(110, 110, 110, 0.8); filter: blur(4px) brightness(1.5); / opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: -1; } a:hover::before { opacity: 1; } body.hoverEffect { background: radial-gradient(circle at center, #000000, #000033, #000066, #1a1a1a); } #gameCard { width: 300px; height: 450px; margin: 50px auto; padding: 20px; border-radius: 15px; box-shadow: 0 0 50px 10px #FFD700, 0 0 100px 20px #0000FF, 0 0 150px 30px #000033; background: rgba(0,0,0,0.7); color:#FFD700; text-align: center; border: 3px solid #FFD700; } #gameCardLink span { font-size: 18px; margin-right: 5px; font-weight: bold; } #gameCardLink span:last-child { font-size: 0.79em; vertical-align: super; opacity: 0.9; font-weight: bold; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); } #loading-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image:url('data:image/jpeg;base64,/); background-repeat: no-repeat; background-size: cover ; display: flex; justify-content: center; align-items: center; z-index: 9999; } .loader { border-top: 9px solid #00a2ed; border-radius: 80%; width: 12vw; height: 12vw; animation: spin 2s linear infinite; position: absolute; left: 44%; top: 46%; / transform: translate(-50%, -50%) rotate(0deg); /* Yuvarlak halkanın tam ortasında olması için bu dönüşümü kullanın. */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div id="loading-animation"> <div class="loader"></div> </div> <div id="main-content"> <div class="tm-container"> <div class="tm-letter" id="t-letter">T</div> <div class="tm-letter" id="m-letter">M</div> </div> <audio id="flipSound" preload="auto"> <source src="https://cdn.freesound.org/previews/321/321114_2776777-lq.ogg" type="audio/wav"> </audio> <main> <div id="gameCardLink"> <span>G</span> <span>a</span> <span>m</span> <span>e</span> <span> </span> <!-- Boşluk eklemek için span ekledik --> <span> </span> <span>C</span> <span> </span> <span>a</span> <span> </span> <span>r</span> <span> </span> <span>d</span> <span> </span> <span>s</span> <span>®</span> </div> <p><a href="https://github.com/murattasci06"><i class="fab fa-github"></i></a></p> </main> <ul> <li class="card" > <div class="card__flipper"> <div class="card__front"> <img src="https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg" alt="Spiderman"> <p class="card__name"><span>Marvel</span><br>Spiderman</p> <p class="card__num">1</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#514d9b" stroke-width="35" /> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>1.89 Bil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg" alt="Batman"> <p class="card__name"><span>DC</span><br>Batman</p> <p class="card__num">2</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#35a541" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>771 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://wallpapercave.com/wp/wp12279011.jpg" alt="Guardians_of_the_Galaxy_Vol_3"> <p class="card__name"><span>Marvel</span><br>Guardians_of_the_Galaxy_Vol_3</p> <p class="card__num">3</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#bdb235" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>845.4 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://wallpaperaccess.com/full/8940499.jpg" alt="Shazam"> <p class="card__name"><span>DC</span><br>Shazam2</p> <p class="card__num">4</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#db6623" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>462.5 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://images2.alphacoders.com/131/1316679.jpeg" alt="Flash"> <p class="card__name"><span>DC</span><br>Flash</p> <p class="card__num">5</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#3e5eb3" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>560.2 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src=" https://images3.alphacoders.com/121/1213553.jpg" alt="Dr_Strange_2"> <p class="card__name"><span>Marvel</span><br>Dr_Strange_2</p> <p class="card__num">6</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#aa9e5c" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>955.8 Mil. $</span> </div> </div> </li> </ul> </div> </body> <script> var Flipper = (function() { var card = $('.card'); var flipper = card.find('.card__flipper'); var win = $(window); var flip = function() { var thisCard = $(this); var thisFlipper = thisCard.find('.card__flipper'); var offset = thisCard.offset(); var xc = win.width() / 2; var yc = win.height() / 2; var docScroll = $(document).scrollTop(); var cardW = thisCard.outerWidth() / 2; var cardH = thisCard.height() / 2; var transX = xc - offset.left - cardW; var transY = docScroll + yc - offset.top - cardH; // if (offset.top > card.height()) transY = docScroll - offset.top + cardH; if (win.width() <= 700) transY = 0; if (card.hasClass('active')) unflip(); thisCard.css({'z-index': '3'}).addClass('active'); thisFlipper.css({ 'transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)', '-webkit-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)', '-ms-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)' }).addClass('active'); return false; }; var unflip = function(e) { card.css({'z-index': '1'}).removeClass('active'); flipper.css({ 'transform': 'none', '-webkit-transform': 'none', '-ms-transform': 'none' }).removeClass('active'); }; var bindActions = function() { card.on('click', flip); win.on('click', unflip); } var init = function() { bindActions(); }; return { init: init }; }()); Flipper.init(); </script> <script> <!-- HOOVER FOR TRAILER --> let hoverTimeout; $('.card').hover(function() { const currentCard = $(this); // Store the current card element in a variable hoverTimeout = setTimeout(() => { currentCard.find('.card__front').hide(); currentCard.find('.iframe').show(); var src = currentCard.find('.iframe').attr("src"); currentCard.find('.iframe').attr("src", src); // Add fullscreen functionality currentCard.find('.iframe').on('click', function() { $(this).requestFullscreen(); }); }, 5000); // 5000 milliseconds (5 seconds) }, function() { clearTimeout(hoverTimeout); // Clear the timeout to prevent actions if the user moves away before 5 seconds $(this).find('.card__front').show(); $(this).find('.iframe').hide(); var src = $(this).find('.iframe').attr("src"); if (src) { $(this).find('.iframe').attr("src", src.replace('?autoplay=1', '')); } }); </script> <script> var cardFlags = {}; $(document).ready(function() { var flipSound = document.getElementById("flipSound"); // Sesin yalnızca kartın ön yüzüne tıklandığında çalmasını sağlayın. $(".card__front").click(function() { console.log('Kart önüne tıklandı', event.target); flipSound.currentTime = 0; flipSound.play(); console.log('dönüş sesi çalındı', event.target); }); $(".card").click(function() { var card = $(this); var cardId = card.find(".card__num").text(); console.log(cardId); // Check if the card is not already flipping to avoid multiple flips if (!card.hasClass('flipping')) { card.addClass('flipping'); // Check if the front side is facing the viewer if (!card.hasClass("flipped")) { console.log("is card flag true or false", cardId); if (!cardFlags[cardId]) { startAnimation(div); console.log("started"); cardFlags[cardId] = true; card.addClass("flipped"); } // Adding canvas to back-side var div = document.querySelector('.flipped .card__flipper.active .card__back'); var canvas = document.getElementsByClassName('p5Canvas')[0]; if (div && canvas) { div.appendChild(canvas); canvas.style.position = 'absolute'; } } else { console.log("stopped"); card.removeClass("flipped"); } setTimeout(function() { card.removeClass('flipping'); }, 1000); } }); // Prevent sound on back side click $(".card__back").click(function(e) { e.stopPropagation(); }); }); </script> <script> // Body's hoover effect document.getElementById("gameCardLink").addEventListener("mouseover", function() { document.body.classList.add("hoverEffect"); }); document.getElementById("gameCardLink").addEventListener("mouseout", function() { document.body.classList.remove("hoverEffect"); }); </script> <script> // Portal effect var p5Instance; function startAnimation(div) { // adding canvas to back-side var canvas = document.getElementsByClassName('p5Canvas')[0]; if (div && canvas) { div.appendChild(canvas); canvas.style.position = 'absolute'; } const sketch = (p) => { const createParticleSystem = (location) => { const origin = location.copy(); const particles = []; const addParticle = velocity => { const rand = p.random(0, 1); if (rand <= .3) { particles.push(createSparkParticle(origin, velocity.copy())); } else { particles.push(createParticle(origin, velocity.copy())); } }; const applyForce = force => { particles.forEach(particle => { particle.applyForce(force); }); }; const run = () => { particles.forEach((particle, index) => { particle.move(); particle.draw(); if (particle.isDead()) { particles.splice(index, 1); } }); }; return { origin, addParticle, run, applyForce }; }; const createSparkParticle = (locationP, velocity) => { const particle = createParticle(locationP, velocity); let fade = 255; const draw = () => { p.colorMode(p.HSB); p.stroke(16, 62, 100, fade); const arrow = velocity.copy().normalize().mult(p.random(2, 4)); const direction = p5.Vector.add(particle.location, arrow); p.line(particle.location.x, particle.location.y, direction.x, direction.y); }; const move = () => { particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4))); particle.velocity.add(particle.acc); particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4))); particle.acc.mult(0); fade -= 5; }; return { ...particle, draw, move } } const createParticle = (locationP, velocity) => { const acc = p.createVector(0, 0); const location = locationP.copy(); let fade = 255; const fadeMinus = p.randomGaussian(15, 2); let ligther = 100; let situate = 62; const draw = () => { p.colorMode(p.HSB) p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade); const arrow = velocity.copy().mult(2); const direction = p5.Vector.add(location, arrow); p.line(location.x, location.y, direction.x, direction.y); }; const move = () => { velocity.add(acc); location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1))); acc.mult(0); fade -= fadeMinus; ligther -= 8; situate += 8; }; const applyForce = force => { acc.add(force); }; const isDead = () => { if (fade < 0 || location.x < 0 || location.x > p.width || location.y > p.height) { return true; } else { return false; } }; return { draw, move, applyForce, isDead, velocity, location, acc }; }; const createMover = () => { const location = p.createVector(p.width / 2, p.height / 2); const velocity = p.createVector(0, 0); const acc = p.createVector(0, 0); const mass = 10; let angle = 0; let angleVelocity = 0; let angleAcc = 0; let len = 100; const particleSystems = [ createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location) ]; const getGotoVector = angle => { const radius = p.map(angleVelocity, 0, 0.3, 0, 80); const goToVector = p.createVector( location.x + radius * p.cos(angle), location.y + radius * p.sin(angle) ); return goToVector; }; const draw = () => { const goToVector = getGotoVector(angle); particleSystems.forEach(particleSystem => { particleSystem.run(); }); }; const renderParticleSystem = () => { particleSystems.forEach(particleSystem => { const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI)); const prepencular = p.createVector( (goToVector.y - location.y)*-1, (goToVector.x - location.x) ); prepencular.normalize(); prepencular.mult(angleVelocity * 70); particleSystem.origin.set(goToVector); particleSystem.addParticle(prepencular); const gravity = p.createVector(0, 0.3); particleSystem.applyForce(gravity); }); }; const move = () => { angleAcc = 0.005; angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32); angle += angleVelocity; angleAcc = 0; renderParticleSystem(); }; return { draw, move }; }; let mover; p.setup = function() { p.createCanvas(230, 320); p.clear(); mover = createMover(); } p.draw = function() { p.clear(); mover.move(); mover.draw(); } }; p5Instance = new p5(sketch); } </script> <script> // hiding and showing loading animation function hideLoadingAnimation() { console.log("Yükleme animasyonu gizleniyor, ana içerik gösteriliyor"); var loadingAnimation = document.getElementById("loading-animation"); var mainContent = document.getElementById("main-content"); loadingAnimation.style.display = "none"; mainContent.style.display = "block"; } window.onload = function() { console.log("Sayfa tamamen yüklendi"); hideLoadingAnimation(); }; </script> </html> </code></pre> <p>朋友们大家好，在该问题的图片中，有一张中间颠倒的紫色卡片。上面和下面各有 2 张牌与这张牌重叠。当卡片正面和背面相互重叠时，我如何轻松确保正面半可见的卡片底部不会通过悬停播放预告片（<strong>鼠标事件在这种情况下不起作用</strong>）？用CSS？我正在尝试用非常简单的方法来解决这个问题。</p> <pre><code>card-partially-visible { pointer-events: none; } </code></pre> <p>这样的事情有意义吗？如果是这样，您应该如何确定它是否部分可见？ 有没有现成的功能可以自动检测？</p> <p><a href="https://i.stack.imgur.com/fMLLv.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL2ZNTEx2LnBuZw==" alt=""/></a></p> </question> <answer tick="false" vote="1"> <p>如果将 3D 过渡从 <pre><code>.card__flipper</code></pre> 移动到 <pre><code>.card</code></pre> 本身，您可以给出任何 <pre><code>.card.active</code></pre> <pre><code>::before</code></pre> 和 <pre><code>::after</code></pre> 伪元素，这将覆盖后面的卡片。</p> <p>在下面的工作示例中，我将伪元素设置为半透明红色（即<pre><code>rgba(255, 0, 0, 0.5)</code></pre>），以便您可以看到它们，但通常您只需将伪元素设置为透明即可：<pre><code>rgba(0, 0, 0, 0)</code></pre>。</p> <hr/> <p><strong>工作示例：</strong></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>var Flipper = (function() { var card = $('.card'); var flipper = card.find('.card__flipper'); var win = $(window); var flip = function() { var thisCard = $(this); var thisFlipper = thisCard.find('.card__flipper'); var offset = thisCard.offset(); var xc = win.width() / 2; var yc = win.height() / 2; var docScroll = $(document).scrollTop(); var cardW = thisCard.outerWidth() / 2; var cardH = thisCard.height() / 2; var transX = xc - offset.left - cardW; var transY = docScroll + yc - offset.top - cardH; // if (offset.top > card.height()) transY = docScroll - offset.top + cardH; if (win.width() <= 700) transY = 0; if (card.hasClass('active')) unflip(); thisCard.css({'z-index': '3'}).css({ 'transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)' }).addClass('active'); thisFlipper.addClass('active'); return false; }; var unflip = function(e) { card.css({'z-index': '1'}).css({ 'transform': 'none' }).removeClass('active'); flipper.removeClass('active'); }; var bindActions = function() { card.on('click', flip); win.on('click', unflip); } var init = function() { bindActions(); }; return { init: init }; }()); Flipper.init(); <!-- HOOVER FOR TRAILER --> let hoverTimeout; $('.card').hover(function() { const currentCard = $(this); // Store the current card element in a variable hoverTimeout = setTimeout(() => { currentCard.find('.card__front').hide(); currentCard.find('.iframe').show(); var src = currentCard.find('.iframe').attr("src"); currentCard.find('.iframe').attr("src", src); // Add fullscreen functionality currentCard.find('.iframe').on('click', function() { $(this).requestFullscreen(); }); }, 5000); // 5000 milliseconds (5 seconds) }, function() { clearTimeout(hoverTimeout); // Clear the timeout to prevent actions if the user moves away before 5 seconds $(this).find('.card__front').show(); $(this).find('.iframe').hide(); var src = $(this).find('.iframe').attr("src"); if (src) { $(this).find('.iframe').attr("src", src.replace('?autoplay=1', '')); } }); var cardFlags = {}; $(document).ready(function() { var flipSound = document.getElementById("flipSound"); // Sesin yalnızca kartın ön yüzüne tıklandığında çalmasını sağlayın. $(".card__front").click(function() { console.log('Kart önüne tıklandı', event.target); flipSound.currentTime = 0; flipSound.play(); console.log('dönüş sesi çalındı', event.target); }); $(".card").click(function() { var card = $(this); var cardId = card.find(".card__num").text(); console.log(cardId); // Check if the card is not already flipping to avoid multiple flips if (!card.hasClass('flipping')) { card.addClass('flipping'); // Check if the front side is facing the viewer if (!card.hasClass("flipped")) { console.log("is card flag true or false", cardId); if (!cardFlags[cardId]) { startAnimation(div); console.log("started"); cardFlags[cardId] = true; card.addClass("flipped"); } // Adding canvas to back-side var div = document.querySelector('.flipped .card__flipper.active .card__back'); var canvas = document.getElementsByClassName('p5Canvas')[0]; if (div && canvas) { div.appendChild(canvas); canvas.style.position = 'absolute'; } } else { console.log("stopped"); card.removeClass("flipped"); } setTimeout(function() { card.removeClass('flipping'); }, 1000); } }); // Prevent sound on back side click $(".card__back").click(function(e) { e.stopPropagation(); }); }); // Body's hoover effect document.getElementById("gameCardLink").addEventListener("mouseover", function() { document.body.classList.add("hoverEffect"); }); document.getElementById("gameCardLink").addEventListener("mouseout", function() { document.body.classList.remove("hoverEffect"); }); // Portal effect var p5Instance; function startAnimation(div) { // adding canvas to back-side var canvas = document.getElementsByClassName('p5Canvas')[0]; if (div && canvas) { div.appendChild(canvas); canvas.style.position = 'absolute'; } const sketch = (p) => { const createParticleSystem = (location) => { const origin = location.copy(); const particles = []; const addParticle = velocity => { const rand = p.random(0, 1); if (rand <= .3) { particles.push(createSparkParticle(origin, velocity.copy())); } else { particles.push(createParticle(origin, velocity.copy())); } }; const applyForce = force => { particles.forEach(particle => { particle.applyForce(force); }); }; const run = () => { particles.forEach((particle, index) => { particle.move(); particle.draw(); if (particle.isDead()) { particles.splice(index, 1); } }); }; return { origin, addParticle, run, applyForce }; }; const createSparkParticle = (locationP, velocity) => { const particle = createParticle(locationP, velocity); let fade = 255; const draw = () => { p.colorMode(p.HSB); p.stroke(16, 62, 100, fade); const arrow = velocity.copy().normalize().mult(p.random(2, 4)); const direction = p5.Vector.add(particle.location, arrow); p.line(particle.location.x, particle.location.y, direction.x, direction.y); }; const move = () => { particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4))); particle.velocity.add(particle.acc); particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4))); particle.acc.mult(0); fade -= 5; }; return { ...particle, draw, move } } const createParticle = (locationP, velocity) => { const acc = p.createVector(0, 0); const location = locationP.copy(); let fade = 255; const fadeMinus = p.randomGaussian(15, 2); let ligther = 100; let situate = 62; const draw = () => { p.colorMode(p.HSB) p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade); const arrow = velocity.copy().mult(2); const direction = p5.Vector.add(location, arrow); p.line(location.x, location.y, direction.x, direction.y); }; const move = () => { velocity.add(acc); location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1))); acc.mult(0); fade -= fadeMinus; ligther -= 8; situate += 8; }; const applyForce = force => { acc.add(force); }; const isDead = () => { if (fade < 0 || location.x < 0 || location.x > p.width || location.y > p.height) { return true; } else { return false; } }; return { draw, move, applyForce, isDead, velocity, location, acc }; }; const createMover = () => { const location = p.createVector(p.width / 2, p.height / 2); const velocity = p.createVector(0, 0); const acc = p.createVector(0, 0); const mass = 10; let angle = 0; let angleVelocity = 0; let angleAcc = 0; let len = 100; const particleSystems = [ createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location) ]; const getGotoVector = angle => { const radius = p.map(angleVelocity, 0, 0.3, 0, 80); const goToVector = p.createVector( location.x + radius * p.cos(angle), location.y + radius * p.sin(angle) ); return goToVector; }; const draw = () => { const goToVector = getGotoVector(angle); particleSystems.forEach(particleSystem => { particleSystem.run(); }); }; const renderParticleSystem = () => { particleSystems.forEach(particleSystem => { const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI)); const prepencular = p.createVector( (goToVector.y - location.y)*-1, (goToVector.x - location.x) ); prepencular.normalize(); prepencular.mult(angleVelocity * 70); particleSystem.origin.set(goToVector); particleSystem.addParticle(prepencular); const gravity = p.createVector(0, 0.3); particleSystem.applyForce(gravity); }); }; const move = () => { angleAcc = 0.005; angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32); angle += angleVelocity; angleAcc = 0; renderParticleSystem(); }; return { draw, move }; }; let mover; p.setup = function() { p.createCanvas(230, 320); p.clear(); mover = createMover(); } p.draw = function() { p.clear(); mover.move(); mover.draw(); } }; p5Instance = new p5(sketch); } // hiding and showing loading animation function hideLoadingAnimation() { console.log("Yükleme animasyonu gizleniyor, ana içerik gösteriliyor"); var loadingAnimation = document.getElementById("loading-animation"); var mainContent = document.getElementById("main-content"); loadingAnimation.style.display = "none"; mainContent.style.display = "block"; } window.onload = function() { console.log("Sayfa tamamen yüklendi"); hideLoadingAnimation(); };</code></pre> <pre><code>.card.active::before, .card.active::after { content: ''; position: relative; z-index: 12; display: block; height: 260px; background-color: rgb(255, 0, 0, 0.5); } .card.active::before { margin-top: -260px; } #main-content { display: none; } * { box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-flow: column wrap; background: radial-gradient(circle, rgba(7, 50, 22, 255) 0%, rgba(0, 0, 0, 255) 100%); animation: shine 4s linear infinite; color: white; font-family: "Lato"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ul { margin: 0; padding: 0; list-style-type: none; max-width: 800px; width: 100%; margin: 0 auto; padding: 15px; text-align: center; overflow-x: hidden; } .card { float: left; position: relative; width: calc(33.33% - 30px + 9.999px); height: 340px; margin: 0 30px 30px 0; transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .card:first-child .card__front { background:#5271C2; } .card__front img { width: 100%; height: 100%; object-fit: cover; } .card:first-child .card__num { text-shadow: 1px 1px rgba(52, 78, 147, 0.8) } .card:nth-child(2) .card__front { background:#35a541; } .card:nth-child(2) .card__num { text-shadow: 1px 1px rgba(34, 107, 42, 0.8); } .card:nth-child(3) { margin-right: 0; } .card:nth-child(3) .card__front { background: #bdb235; } .card:nth-child(3) .card__num { text-shadow: 1px 1px rgba(129, 122, 36, 0.8); } .card:nth-child(4) .card__front { background: #db6623; } .card:nth-child(4) .card__num { text-shadow: 1px 1px rgba(153, 71, 24, 0.8); } .card:nth-child(5) .card__front { background: #3e5eb3; } .card:nth-child(5) .card__num { text-shadow: 1px 1px rgba(42, 64, 122, 0.8); } .card:nth-child(6) .card__front { background: #aa9e5c; } .card:nth-child(6) .card__num { text-shadow: 1px 1px rgba(122, 113, 64, 0.8); } .card:last-child { margin-right: 0; } .card__flipper { cursor: pointer; border: 3.5px solid rgba(255, 215, 0, 0.6); background-image: linear-gradient(45deg, rgba(255, 215, 0, 0.5), transparent, rgba(255, 215, 0, 0.5)); transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .card__front, .card__back { position: absolute; backface-visibility: hidden; top: 0; left: 0; width: 100%; height: 340px; } .card__front { transform: rotateY(0); z-index: 2; overflow: hidden; } .card__back { transform: rotateY(180deg) scale(1.1); background: linear-gradient(45deg, #483D8B, #301934, #483D8B, #301934); display: flex; flex-flow: column wrap; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .card__back span { font-weight: bold; /* Metni kalın yap */ color: white; /* Beyaz renk */ font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .card__name { font-size: 32px; line-height: 0.9; font-weight: 700; } .card__name span { font-size: 14px; } .card__num { font-size: 100px; margin: 0 8px 0 0; font-weight: 700; } @media (max-width: 700px) { .card__num { font-size: 70px; } } @media (max-width: 700px) { .card { width: 100%; height: 290px; margin-right: 0; float: none; } .card .card__front, .card .card__back { height: 290px; overflow: hidden; } } /* Demo */ main { text-align: center; } main h1, main p { margin: 0 0 12px 0; } main h1 { margin-top: 12px; font-weight: 300; } .fa-github { color: white; font-size: 50px; margin-top: 8px; } .tm-container { display: flex; justify-content: center; align-items: center; } .tm-letter { display:inline-block; font-size:30px; margin: 0 5px; margin-top: 10px; opacity: 0; transform: translateY(0); animation: letter-animation 6s ease-in-out infinite; } @keyframes letter-animation { 0%, 100% { opacity: 1; transform: translateY(0); } 10%, 40%, 60%, 90% { opacity: 1; transform: translateY(-10px); } 20%, 80% { opacity: 1; transform: translateY(0); } } #m-letter { animation-delay: 1.5s; } a { position: relative; display: inline-block; padding: 0px; } a::before { content: ''; position: absolute; top: 50%; /* Orta konumu */ left: 50%; /* Orta konumu */ transform: translate(-50%, -50%); width: 50px; height: 45px; border-radius: 50%; /* Eğer bir daire şeklinde efekt isteniyorsa */ box-shadow: 0 0 8px 4px rgba(110, 110, 110, 0.8); filter: blur(4px) brightness(1.5); / opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: -1; } a:hover::before { opacity: 1; } body.hoverEffect { background: radial-gradient(circle at center, #000000, #000033, #000066, #1a1a1a); } #gameCard { width: 300px; height: 450px; margin: 50px auto; padding: 20px; border-radius: 15px; box-shadow: 0 0 50px 10px #FFD700, 0 0 100px 20px #0000FF, 0 0 150px 30px #000033; background: rgba(0,0,0,0.7); color:#FFD700; text-align: center; border: 3px solid #FFD700; } #gameCardLink span { font-size: 18px; margin-right: 5px; font-weight: bold; } #gameCardLink span:last-child { font-size: 0.79em; vertical-align: super; opacity: 0.9; font-weight: bold; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); } #loading-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image:url('data:image/jpeg;base64,/); background-repeat: no-repeat; background-size: cover ; display: flex; justify-content: center; align-items: center; z-index: 9999; } .loader { border-top: 9px solid #00a2ed; border-radius: 80%; width: 12vw; height: 12vw; animation: spin 2s linear infinite; position: absolute; left: 44%; top: 46%; / transform: translate(-50%, -50%) rotate(0deg); /* Yuvarlak halkanın tam ortasında olması için bu dönüşümü kullanın. */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</code></pre> <pre><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <div id="loading-animation"> <div class="loader"></div> </div> <div id="main-content"> <div class="tm-container"> <div class="tm-letter" id="t-letter">T</div> <div class="tm-letter" id="m-letter">M</div> </div> <audio id="flipSound" preload="auto"> <source src="https://cdn.freesound.org/previews/321/321114_2776777-lq.ogg" type="audio/wav"> </audio> <main> <div id="gameCardLink"> <span>G</span> <span>a</span> <span>m</span> <span>e</span> <span> </span> <!-- Boşluk eklemek için span ekledik --> <span> </span> <span>C</span> <span> </span> <span>a</span> <span> </span> <span>r</span> <span> </span> <span>d</span> <span> </span> <span>s</span> <span>®</span> </div> <p><a href="https://github.com/murattasci06"><i class="fab fa-github"></i></a></p> </main> <ul> <li class="card" > <div class="card__flipper"> <div class="card__front"> <img src="https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg" alt="Spiderman"> <p class="card__name"><span>Marvel</span><br>Spiderman</p> <p class="card__num">1</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#514d9b" stroke-width="35" /> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>1.89 Bil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg" alt="Batman"> <p class="card__name"><span>DC</span><br>Batman</p> <p class="card__num">2</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#35a541" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>771 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://wallpapercave.com/wp/wp12279011.jpg" alt="Guardians_of_the_Galaxy_Vol_3"> <p class="card__name"><span>Marvel</span><br>Guardians_of_the_Galaxy_Vol_3</p> <p class="card__num">3</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#bdb235" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>845.4 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://wallpaperaccess.com/full/8940499.jpg" alt="Shazam"> <p class="card__name"><span>DC</span><br>Shazam2</p> <p class="card__num">4</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#db6623" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>462.5 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://images2.alphacoders.com/131/1316679.jpeg" alt="Flash"> <p class="card__name"><span>DC</span><br>Flash</p> <p class="card__num">5</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#3e5eb3" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>560.2 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src=" https://images3.alphacoders.com/121/1213553.jpg" alt="Dr_Strange_2"> <p class="card__name"><span>Marvel</span><br>Dr_Strange_2</p> <p class="card__num">6</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#aa9e5c" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>955.8 Mil. $</span> </div> </div> </li> </ul> </div></code></pre> </div> </div> <p></p> </answer> </body></html>
当在正确设置了 z-index 的浏览器上显示文本时，html2canvas 不会在 SVG 上渲染文本
我正在使用 html2canvas 来生成和保存海报。我目前有一个不透明度为 1 且 z-index:1 的自定义 SVG 对象。最重要的是，我有 MaterialUI 的 Typography 和正常的 ... 我正在使用 html2canvas 来生成和保存海报。我目前有一个不透明度为 1 且 z-index:1 的自定义 SVG 对象。最重要的是，我有 MaterialUI's Typography 和普通 <h1> 标签，z-index 设置为更高的值。当我下载图像时，但是文本没有出现。 令人惊讶的是，当我将自定义 SVG 对象的不透明度设置为 0.5 时，我可以看到仍然存在的文本。我相信这可能是 z-index 没有正确应用的情况。 请提供任何建议！代码块如下。 海报 <Box sx={{ zIndex: 5, justifyContent: "flex-start", backgroundColor: "rgba(0, 0, 0, 0)", width: "90%", height: "35%", padding: "1rem", marginTop: "800px", overflow: "hidden", }} > <h1 > {donationDetails.startDate} </h1> <Typography color="white" variant="h1" gutterBottom sx = {{zIndex: 5000}} > {donationDetails.startDate} </Typography> <Typography color="white" variant="h2" gutterBottom > {donationDetails.name} </Typography> <Typography color="white" variant="h3" gutterBottom > {donationDetails.location} </Typography> <Typography color="white" variant="h3" gutterBottom > {donationDetails.donationItems} </Typography> </Box> <BasicOutline style={{ position: "absolute", zIndex: 1, }} /> 手柄下载代码 const handleDownload = () => { const box = document.getElementById('poster-box'); if (!box) return; html2canvas(box) .then(canvas => { const dataURL = canvas.toDataURL(); const link = document.createElement('a'); link.href = dataURL; link.download = 'poster.png'; link.click(); }); }; 通过在此链接此处添加position:relative解决了这个问题 <Box sx={{ justifyContent: "flex-start", backgroundColor: "rgba(0, 0, 0, 0)", width: "90%", height: "35%", padding: "1rem", marginTop: "800px", overflow: "hidden", zIndex: "5000", **position:"relative"** }} >
<pre><code><html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <title>Game Cards App</title> <link rel="icon" type="image/png" href="https://cdn1.iconfinder.com/data/icons/entertainment-events-hobbies/24/card-game-cards-hold-512.png"> <style> .card-partially-visible { pointer-events: none; } #main-content { display: none; } * { box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-flow: column wrap; background: radial-gradient(circle, rgba(7, 50, 22, 255) 0%, rgba(0, 0, 0, 255) 100%); animation: shine 4s linear infinite; color: white; font-family: "Lato"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ul { margin: 0; padding: 0; list-style-type: none; max-width: 800px; width: 100%; margin: 0 auto; padding: 15px; text-align: center; overflow-x: hidden; } .card { float: left; position: relative; width: calc(33.33% - 30px + 9.999px); height: 340px; margin: 0 30px 30px 0; perspective: 1000; } .card:first-child .card__front { background:#5271C2; } .card__front img { width: 100%; height: 100%; object-fit: cover; } .card:first-child .card__num { text-shadow: 1px 1px rgba(52, 78, 147, 0.8) } .card:nth-child(2) .card__front { background:#35a541; } .card:nth-child(2) .card__num { text-shadow: 1px 1px rgba(34, 107, 42, 0.8); } .card:nth-child(3) { margin-right: 0; } .card:nth-child(3) .card__front { background: #bdb235; } .card:nth-child(3) .card__num { text-shadow: 1px 1px rgba(129, 122, 36, 0.8); } .card:nth-child(4) .card__front { background: #db6623; } .card:nth-child(4) .card__num { text-shadow: 1px 1px rgba(153, 71, 24, 0.8); } .card:nth-child(5) .card__front { background: #3e5eb3; } .card:nth-child(5) .card__num { text-shadow: 1px 1px rgba(42, 64, 122, 0.8); } .card:nth-child(6) .card__front { background: #aa9e5c; } .card:nth-child(6) .card__num { text-shadow: 1px 1px rgba(122, 113, 64, 0.8); } .card:last-child { margin-right: 0; } .card__flipper { cursor: pointer; transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); border: 3.5px solid rgba(255, 215, 0, 0.6); background-image: linear-gradient(45deg, rgba(255, 215, 0, 0.5), transparent, rgba(255, 215, 0, 0.5)); } .card__front, .card__back { position: absolute; backface-visibility: hidden; top: 0; left: 0; width: 100%; height: 340px; } .card__front { transform: rotateY(0); z-index: 2; overflow: hidden; } .card__back { transform: rotateY(180deg) scale(1.1); background: linear-gradient(45deg, #483D8B, #301934, #483D8B, #301934); display: flex; flex-flow: column wrap; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .card__back span { font-weight: bold; /* Metni kalın yap */ color: white; /* Beyaz renk */ font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .card__name { font-size: 32px; line-height: 0.9; font-weight: 700; } .card__name span { font-size: 14px; } .card__num { font-size: 100px; margin: 0 8px 0 0; font-weight: 700; } @media (max-width: 700px) { .card__num { font-size: 70px; } } @media (max-width: 700px) { .card { width: 100%; height: 290px; margin-right: 0; float: none; } .card .card__front, .card .card__back { height: 290px; overflow: hidden; } } /* Demo */ main { text-align: center; } main h1, main p { margin: 0 0 12px 0; } main h1 { margin-top: 12px; font-weight: 300; } .fa-github { color: white; font-size: 50px; margin-top: 8px; } .tm-container { display: flex; justify-content: center; align-items: center; } .tm-letter { display:inline-block; font-size:30px; margin: 0 5px; margin-top: 10px; opacity: 0; transform: translateY(0); animation: letter-animation 6s ease-in-out infinite; } @keyframes letter-animation { 0%, 100% { opacity: 1; transform: translateY(0); } 10%, 40%, 60%, 90% { opacity: 1; transform: translateY(-10px); } 20%, 80% { opacity: 1; transform: translateY(0); } } #m-letter { animation-delay: 1.5s; } a { position: relative; display: inline-block; padding: 0px; } a::before { content: ''; position: absolute; top: 50%; /* Orta konumu */ left: 50%; /* Orta konumu */ transform: translate(-50%, -50%); width: 50px; height: 45px; border-radius: 50%; /* Eğer bir daire şeklinde efekt isteniyorsa */ box-shadow: 0 0 8px 4px rgba(110, 110, 110, 0.8); filter: blur(4px) brightness(1.5); / opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: -1; } a:hover::before { opacity: 1; } body.hoverEffect { background: radial-gradient(circle at center, #000000, #000033, #000066, #1a1a1a); } #gameCard { width: 300px; height: 450px; margin: 50px auto; padding: 20px; border-radius: 15px; box-shadow: 0 0 50px 10px #FFD700, 0 0 100px 20px #0000FF, 0 0 150px 30px #000033; background: rgba(0,0,0,0.7); color:#FFD700; text-align: center; border: 3px solid #FFD700; } #gameCardLink span { font-size: 18px; margin-right: 5px; font-weight: bold; } #gameCardLink span:last-child { font-size: 0.79em; vertical-align: super; opacity: 0.9; font-weight: bold; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); } #loading-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image:url('data:image/jpeg;base64,/); background-repeat: no-repeat; background-size: cover ; display: flex; justify-content: center; align-items: center; z-index: 9999; } .loader { border-top: 9px solid #00a2ed; border-radius: 80%; width: 12vw; height: 12vw; animation: spin 2s linear infinite; position: absolute; left: 44%; top: 46%; / transform: translate(-50%, -50%) rotate(0deg); /* Yuvarlak halkanın tam ortasında olması için bu dönüşümü kullanın. */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div id="loading-animation"> <div class="loader"></div> </div> <div id="main-content"> <div class="tm-container"> <div class="tm-letter" id="t-letter">T</div> <div class="tm-letter" id="m-letter">M</div> </div> <audio id="flipSound" preload="auto"> <source src="https://cdn.freesound.org/previews/321/321114_2776777-lq.ogg" type="audio/wav"> </audio> <main> <div id="gameCardLink"> <span>G</span> <span>a</span> <span>m</span> <span>e</span> <span> </span> <!-- Boşluk eklemek için span ekledik --> <span> </span> <span>C</span> <span> </span> <span>a</span> <span> </span> <span>r</span> <span> </span> <span>d</span> <span> </span> <span>s</span> <span>®</span> </div> <p><a href="https://github.com/murattasci06"><i class="fab fa-github"></i></a></p> </main> <ul> <li class="card" > <div class="card__flipper"> <div class="card__front"> <img src="https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg" alt="Spiderman"> <p class="card__name"><span>Marvel</span><br>Spiderman</p> <p class="card__num">1</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#514d9b" stroke-width="35" /> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>1.89 Bil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg" alt="Batman"> <p class="card__name"><span>DC</span><br>Batman</p> <p class="card__num">2</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#35a541" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>771 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://wallpapercave.com/wp/wp12279011.jpg" alt="Guardians_of_the_Galaxy_Vol_3"> <p class="card__name"><span>Marvel</span><br>Guardians_of_the_Galaxy_Vol_3</p> <p class="card__num">3</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#bdb235" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>845.4 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://wallpaperaccess.com/full/8940499.jpg" alt="Shazam"> <p class="card__name"><span>DC</span><br>Shazam2</p> <p class="card__num">4</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#db6623" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>462.5 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://images2.alphacoders.com/131/1316679.jpeg" alt="Flash"> <p class="card__name"><span>DC</span><br>Flash</p> <p class="card__num">5</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#3e5eb3" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>560.2 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src=" https://images3.alphacoders.com/121/1213553.jpg" alt="Dr_Strange_2"> <p class="card__name"><span>Marvel</span><br>Dr_Strange_2</p> <p class="card__num">6</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#aa9e5c" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>955.8 Mil. $</span> </div> </div> </li> </ul> </div> </body> <script> var Flipper = (function() { var card = $('.card'); var flipper = card.find('.card__flipper'); var win = $(window); var flip = function() { var thisCard = $(this); var thisFlipper = thisCard.find('.card__flipper'); var offset = thisCard.offset(); var xc = win.width() / 2; var yc = win.height() / 2; var docScroll = $(document).scrollTop(); var cardW = thisCard.outerWidth() / 2; var cardH = thisCard.height() / 2; var transX = xc - offset.left - cardW; var transY = docScroll + yc - offset.top - cardH; // if (offset.top > card.height()) transY = docScroll - offset.top + cardH; if (win.width() <= 700) transY = 0; if (card.hasClass('active')) unflip(); thisCard.css({'z-index': '3'}).addClass('active'); thisFlipper.css({ 'transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)', '-webkit-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)', '-ms-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)' }).addClass('active'); return false; }; var unflip = function(e) { card.css({'z-index': '1'}).removeClass('active'); flipper.css({ 'transform': 'none', '-webkit-transform': 'none', '-ms-transform': 'none' }).removeClass('active'); }; var bindActions = function() { card.on('click', flip); win.on('click', unflip); } var init = function() { bindActions(); }; return { init: init }; }()); Flipper.init(); </script> <script> <!-- HOOVER FOR TRAILER --> let hoverTimeout; $('.card').hover(function() { const currentCard = $(this); // Store the current card element in a variable hoverTimeout = setTimeout(() => { currentCard.find('.card__front').hide(); currentCard.find('.iframe').show(); var src = currentCard.find('.iframe').attr("src"); currentCard.find('.iframe').attr("src", src); // Add fullscreen functionality currentCard.find('.iframe').on('click', function() { $(this).requestFullscreen(); }); }, 5000); // 5000 milliseconds (5 seconds) }, function() { clearTimeout(hoverTimeout); // Clear the timeout to prevent actions if the user moves away before 5 seconds $(this).find('.card__front').show(); $(this).find('.iframe').hide(); var src = $(this).find('.iframe').attr("src"); if (src) { $(this).find('.iframe').attr("src", src.replace('?autoplay=1', '')); } }); </script> <script> var cardFlags = {}; $(document).ready(function() { var flipSound = document.getElementById("flipSound"); // Sesin yalnızca kartın ön yüzüne tıklandığında çalmasını sağlayın. $(".card__front").click(function() { console.log('Kart önüne tıklandı', event.target); flipSound.currentTime = 0; flipSound.play(); console.log('dönüş sesi çalındı', event.target); }); $(".card").click(function() { var card = $(this); var cardId = card.find(".card__num").text(); console.log(cardId); // Check if the card is not already flipping to avoid multiple flips if (!card.hasClass('flipping')) { card.addClass('flipping'); // Check if the front side is facing the viewer if (!card.hasClass("flipped")) { console.log("is card flag true or false", cardId); if (!cardFlags[cardId]) { startAnimation(div); console.log("started"); cardFlags[cardId] = true; card.addClass("flipped"); } // Adding canvas to back-side var div = document.querySelector('.flipped .card__flipper.active .card__back'); var canvas = document.getElementsByClassName('p5Canvas')[0]; if (div && canvas) { div.appendChild(canvas); canvas.style.position = 'absolute'; } } else { console.log("stopped"); card.removeClass("flipped"); } setTimeout(function() { card.removeClass('flipping'); }, 1000); } }); // Prevent sound on back side click $(".card__back").click(function(e) { e.stopPropagation(); }); }); </script> <script> // Body's hoover effect document.getElementById("gameCardLink").addEventListener("mouseover", function() { document.body.classList.add("hoverEffect"); }); document.getElementById("gameCardLink").addEventListener("mouseout", function() { document.body.classList.remove("hoverEffect"); }); </script> <script> // Portal effect var p5Instance; function startAnimation(div) { // adding canvas to back-side var canvas = document.getElementsByClassName('p5Canvas')[0]; if (div && canvas) { div.appendChild(canvas); canvas.style.position = 'absolute'; } const sketch = (p) => { const createParticleSystem = (location) => { const origin = location.copy(); const particles = []; const addParticle = velocity => { const rand = p.random(0, 1); if (rand <= .3) { particles.push(createSparkParticle(origin, velocity.copy())); } else { particles.push(createParticle(origin, velocity.copy())); } }; const applyForce = force => { particles.forEach(particle => { particle.applyForce(force); }); }; const run = () => { particles.forEach((particle, index) => { particle.move(); particle.draw(); if (particle.isDead()) { particles.splice(index, 1); } }); }; return { origin, addParticle, run, applyForce }; }; const createSparkParticle = (locationP, velocity) => { const particle = createParticle(locationP, velocity); let fade = 255; const draw = () => { p.colorMode(p.HSB); p.stroke(16, 62, 100, fade); const arrow = velocity.copy().normalize().mult(p.random(2, 4)); const direction = p5.Vector.add(particle.location, arrow); p.line(particle.location.x, particle.location.y, direction.x, direction.y); }; const move = () => { particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4))); particle.velocity.add(particle.acc); particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4))); particle.acc.mult(0); fade -= 5; }; return { ...particle, draw, move } } const createParticle = (locationP, velocity) => { const acc = p.createVector(0, 0); const location = locationP.copy(); let fade = 255; const fadeMinus = p.randomGaussian(15, 2); let ligther = 100; let situate = 62; const draw = () => { p.colorMode(p.HSB) p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade); const arrow = velocity.copy().mult(2); const direction = p5.Vector.add(location, arrow); p.line(location.x, location.y, direction.x, direction.y); }; const move = () => { velocity.add(acc); location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1))); acc.mult(0); fade -= fadeMinus; ligther -= 8; situate += 8; }; const applyForce = force => { acc.add(force); }; const isDead = () => { if (fade < 0 || location.x < 0 || location.x > p.width || location.y > p.height) { return true; } else { return false; } }; return { draw, move, applyForce, isDead, velocity, location, acc }; }; const createMover = () => { const location = p.createVector(p.width / 2, p.height / 2); const velocity = p.createVector(0, 0); const acc = p.createVector(0, 0); const mass = 10; let angle = 0; let angleVelocity = 0; let angleAcc = 0; let len = 100; const particleSystems = [ createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location) ]; const getGotoVector = angle => { const radius = p.map(angleVelocity, 0, 0.3, 0, 80); const goToVector = p.createVector( location.x + radius * p.cos(angle), location.y + radius * p.sin(angle) ); return goToVector; }; const draw = () => { const goToVector = getGotoVector(angle); particleSystems.forEach(particleSystem => { particleSystem.run(); }); }; const renderParticleSystem = () => { particleSystems.forEach(particleSystem => { const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI)); const prepencular = p.createVector( (goToVector.y - location.y)*-1, (goToVector.x - location.x) ); prepencular.normalize(); prepencular.mult(angleVelocity * 70); particleSystem.origin.set(goToVector); particleSystem.addParticle(prepencular); const gravity = p.createVector(0, 0.3); particleSystem.applyForce(gravity); }); }; const move = () => { angleAcc = 0.005; angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32); angle += angleVelocity; angleAcc = 0; renderParticleSystem(); }; return { draw, move }; }; let mover; p.setup = function() { p.createCanvas(230, 320); p.clear(); mover = createMover(); } p.draw = function() { p.clear(); mover.move(); mover.draw(); } }; p5Instance = new p5(sketch); } </script> <script> // hiding and showing loading animation function hideLoadingAnimation() { console.log("Yükleme animasyonu gizleniyor, ana içerik gösteriliyor"); var loadingAnimation = document.getElementById("loading-animation"); var mainContent = document.getElementById("main-content"); loadingAnimation.style.display = "none"; mainContent.style.display = "block"; } window.onload = function() { console.log("Sayfa tamamen yüklendi"); hideLoadingAnimation(); }; </script> </html> </code></pre> <p>朋友们大家好，在该问题的图片中，有一张中间颠倒的紫色卡片。上面和下面各有 2 张牌与这张牌重叠。当卡片正面和背面相互重叠时，我如何轻松确保正面半可见的卡片底部不会用胡佛播放预告片（<strong>鼠标事件在这种情况下不起作用</strong>）？用CSS？我正在尝试用非常简单的方法来解决这个问题。</p> <pre><code>card-partially-visible { pointer-events: none; } </code></pre> <p>这样的事情有意义吗？如果是这样，您应该如何确定它是否部分可见？ 有没有现成的功能可以自动检测？</p> <p><a href="https://i.stack.imgur.com/6kFhI.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzZrRmhJLnBuZw==" alt=""/></a></p> </question> <answer tick="false" vote="0"> <p>如果将 3D 过渡从 <pre><code>.card__flipper</code></pre> 移动到 <pre><code>.card</code></pre> 本身，您可以给出任何 <pre><code>.card.active</code></pre> <pre><code>::before</code></pre> 和 <pre><code>::after</code></pre> 伪元素，它们将覆盖后面的卡片。</p> <p>在下面的工作示例中，我将伪元素设置为半透明红色（即<pre><code>rgba(255, 0, 0, 0.5)</code></pre>），以便您可以看到它们，但通常您只需将伪元素设置为透明即可：<pre><code>rgba(0, 0, 0, 0)</code></pre>。</p> <hr/> <p><strong>工作示例：</strong></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>var Flipper = (function() { var card = $('.card'); var flipper = card.find('.card__flipper'); var win = $(window); var flip = function() { var thisCard = $(this); var thisFlipper = thisCard.find('.card__flipper'); var offset = thisCard.offset(); var xc = win.width() / 2; var yc = win.height() / 2; var docScroll = $(document).scrollTop(); var cardW = thisCard.outerWidth() / 2; var cardH = thisCard.height() / 2; var transX = xc - offset.left - cardW; var transY = docScroll + yc - offset.top - cardH; // if (offset.top > card.height()) transY = docScroll - offset.top + cardH; if (win.width() <= 700) transY = 0; if (card.hasClass('active')) unflip(); thisCard.css({'z-index': '3'}).css({ 'transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)' }).addClass('active'); thisFlipper.addClass('active'); return false; }; var unflip = function(e) { card.css({'z-index': '1'}).css({ 'transform': 'none' }).removeClass('active'); flipper.removeClass('active'); }; var bindActions = function() { card.on('click', flip); win.on('click', unflip); } var init = function() { bindActions(); }; return { init: init }; }()); Flipper.init(); <!-- HOOVER FOR TRAILER --> let hoverTimeout; $('.card').hover(function() { const currentCard = $(this); // Store the current card element in a variable hoverTimeout = setTimeout(() => { currentCard.find('.card__front').hide(); currentCard.find('.iframe').show(); var src = currentCard.find('.iframe').attr("src"); currentCard.find('.iframe').attr("src", src); // Add fullscreen functionality currentCard.find('.iframe').on('click', function() { $(this).requestFullscreen(); }); }, 5000); // 5000 milliseconds (5 seconds) }, function() { clearTimeout(hoverTimeout); // Clear the timeout to prevent actions if the user moves away before 5 seconds $(this).find('.card__front').show(); $(this).find('.iframe').hide(); var src = $(this).find('.iframe').attr("src"); if (src) { $(this).find('.iframe').attr("src", src.replace('?autoplay=1', '')); } }); var cardFlags = {}; $(document).ready(function() { var flipSound = document.getElementById("flipSound"); // Sesin yalnızca kartın ön yüzüne tıklandığında çalmasını sağlayın. $(".card__front").click(function() { console.log('Kart önüne tıklandı', event.target); flipSound.currentTime = 0; flipSound.play(); console.log('dönüş sesi çalındı', event.target); }); $(".card").click(function() { var card = $(this); var cardId = card.find(".card__num").text(); console.log(cardId); // Check if the card is not already flipping to avoid multiple flips if (!card.hasClass('flipping')) { card.addClass('flipping'); // Check if the front side is facing the viewer if (!card.hasClass("flipped")) { console.log("is card flag true or false", cardId); if (!cardFlags[cardId]) { startAnimation(div); console.log("started"); cardFlags[cardId] = true; card.addClass("flipped"); } // Adding canvas to back-side var div = document.querySelector('.flipped .card__flipper.active .card__back'); var canvas = document.getElementsByClassName('p5Canvas')[0]; if (div && canvas) { div.appendChild(canvas); canvas.style.position = 'absolute'; } } else { console.log("stopped"); card.removeClass("flipped"); } setTimeout(function() { card.removeClass('flipping'); }, 1000); } }); // Prevent sound on back side click $(".card__back").click(function(e) { e.stopPropagation(); }); }); // Body's hoover effect document.getElementById("gameCardLink").addEventListener("mouseover", function() { document.body.classList.add("hoverEffect"); }); document.getElementById("gameCardLink").addEventListener("mouseout", function() { document.body.classList.remove("hoverEffect"); }); // Portal effect var p5Instance; function startAnimation(div) { // adding canvas to back-side var canvas = document.getElementsByClassName('p5Canvas')[0]; if (div && canvas) { div.appendChild(canvas); canvas.style.position = 'absolute'; } const sketch = (p) => { const createParticleSystem = (location) => { const origin = location.copy(); const particles = []; const addParticle = velocity => { const rand = p.random(0, 1); if (rand <= .3) { particles.push(createSparkParticle(origin, velocity.copy())); } else { particles.push(createParticle(origin, velocity.copy())); } }; const applyForce = force => { particles.forEach(particle => { particle.applyForce(force); }); }; const run = () => { particles.forEach((particle, index) => { particle.move(); particle.draw(); if (particle.isDead()) { particles.splice(index, 1); } }); }; return { origin, addParticle, run, applyForce }; }; const createSparkParticle = (locationP, velocity) => { const particle = createParticle(locationP, velocity); let fade = 255; const draw = () => { p.colorMode(p.HSB); p.stroke(16, 62, 100, fade); const arrow = velocity.copy().normalize().mult(p.random(2, 4)); const direction = p5.Vector.add(particle.location, arrow); p.line(particle.location.x, particle.location.y, direction.x, direction.y); }; const move = () => { particle.applyForce(p.createVector(p.random(-.2, .2), p.random(-0.1, -0.4))); particle.velocity.add(particle.acc); particle.location.add(particle.velocity.copy().normalize().mult(p.random(2, 4))); particle.acc.mult(0); fade -= 5; }; return { ...particle, draw, move } } const createParticle = (locationP, velocity) => { const acc = p.createVector(0, 0); const location = locationP.copy(); let fade = 255; const fadeMinus = p.randomGaussian(15, 2); let ligther = 100; let situate = 62; const draw = () => { p.colorMode(p.HSB) p.stroke(16, p.constrain(situate, 62, 92), p.constrain(ligther, 60, 100), fade); const arrow = velocity.copy().mult(2); const direction = p5.Vector.add(location, arrow); p.line(location.x, location.y, direction.x, direction.y); }; const move = () => { velocity.add(acc); location.add(velocity.copy().div(p.map(velocity.mag(), 18, 0, 5, 1))); acc.mult(0); fade -= fadeMinus; ligther -= 8; situate += 8; }; const applyForce = force => { acc.add(force); }; const isDead = () => { if (fade < 0 || location.x < 0 || location.x > p.width || location.y > p.height) { return true; } else { return false; } }; return { draw, move, applyForce, isDead, velocity, location, acc }; }; const createMover = () => { const location = p.createVector(p.width / 2, p.height / 2); const velocity = p.createVector(0, 0); const acc = p.createVector(0, 0); const mass = 10; let angle = 0; let angleVelocity = 0; let angleAcc = 0; let len = 100; const particleSystems = [ createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location), createParticleSystem(location) ]; const getGotoVector = angle => { const radius = p.map(angleVelocity, 0, 0.3, 0, 80); const goToVector = p.createVector( location.x + radius * p.cos(angle), location.y + radius * p.sin(angle) ); return goToVector; }; const draw = () => { const goToVector = getGotoVector(angle); particleSystems.forEach(particleSystem => { particleSystem.run(); }); }; const renderParticleSystem = () => { particleSystems.forEach(particleSystem => { const goToVector = getGotoVector(angle - p.random(0, p.TWO_PI)); const prepencular = p.createVector( (goToVector.y - location.y)*-1, (goToVector.x - location.x) ); prepencular.normalize(); prepencular.mult(angleVelocity * 70); particleSystem.origin.set(goToVector); particleSystem.addParticle(prepencular); const gravity = p.createVector(0, 0.3); particleSystem.applyForce(gravity); }); }; const move = () => { angleAcc = 0.005; angleVelocity = p.constrain(angleVelocity + angleAcc, 0, 0.32); angle += angleVelocity; angleAcc = 0; renderParticleSystem(); }; return { draw, move }; }; let mover; p.setup = function() { p.createCanvas(230, 320); p.clear(); mover = createMover(); } p.draw = function() { p.clear(); mover.move(); mover.draw(); } }; p5Instance = new p5(sketch); } // hiding and showing loading animation function hideLoadingAnimation() { console.log("Yükleme animasyonu gizleniyor, ana içerik gösteriliyor"); var loadingAnimation = document.getElementById("loading-animation"); var mainContent = document.getElementById("main-content"); loadingAnimation.style.display = "none"; mainContent.style.display = "block"; } window.onload = function() { console.log("Sayfa tamamen yüklendi"); hideLoadingAnimation(); };</code></pre> <pre><code>.card.active::before, .card.active::after { content: ''; position: relative; z-index: 12; display: block; height: 200px; background-color: rgb(255, 0, 0, 0.5); } .card.active::before { margin-top: -200px; } #main-content { display: none; } * { box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; flex-flow: column wrap; background: radial-gradient(circle, rgba(7, 50, 22, 255) 0%, rgba(0, 0, 0, 255) 100%); animation: shine 4s linear infinite; color: white; font-family: "Lato"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ul { margin: 0; padding: 0; list-style-type: none; max-width: 800px; width: 100%; margin: 0 auto; padding: 15px; text-align: center; overflow-x: hidden; } .card { float: left; position: relative; width: calc(33.33% - 30px + 9.999px); height: 340px; margin: 0 30px 30px 0; transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .card:first-child .card__front { background:#5271C2; } .card__front img { width: 100%; height: 100%; object-fit: cover; } .card:first-child .card__num { text-shadow: 1px 1px rgba(52, 78, 147, 0.8) } .card:nth-child(2) .card__front { background:#35a541; } .card:nth-child(2) .card__num { text-shadow: 1px 1px rgba(34, 107, 42, 0.8); } .card:nth-child(3) { margin-right: 0; } .card:nth-child(3) .card__front { background: #bdb235; } .card:nth-child(3) .card__num { text-shadow: 1px 1px rgba(129, 122, 36, 0.8); } .card:nth-child(4) .card__front { background: #db6623; } .card:nth-child(4) .card__num { text-shadow: 1px 1px rgba(153, 71, 24, 0.8); } .card:nth-child(5) .card__front { background: #3e5eb3; } .card:nth-child(5) .card__num { text-shadow: 1px 1px rgba(42, 64, 122, 0.8); } .card:nth-child(6) .card__front { background: #aa9e5c; } .card:nth-child(6) .card__num { text-shadow: 1px 1px rgba(122, 113, 64, 0.8); } .card:last-child { margin-right: 0; } .card__flipper { cursor: pointer; border: 3.5px solid rgba(255, 215, 0, 0.6); background-image: linear-gradient(45deg, rgba(255, 215, 0, 0.5), transparent, rgba(255, 215, 0, 0.5)); transform-style: preserve-3d; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .card__front, .card__back { position: absolute; backface-visibility: hidden; top: 0; left: 0; width: 100%; height: 340px; } .card__front { transform: rotateY(0); z-index: 2; overflow: hidden; } .card__back { transform: rotateY(180deg) scale(1.1); background: linear-gradient(45deg, #483D8B, #301934, #483D8B, #301934); display: flex; flex-flow: column wrap; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .card__back span { font-weight: bold; /* Metni kalın yap */ color: white; /* Beyaz renk */ font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .card__name { font-size: 32px; line-height: 0.9; font-weight: 700; } .card__name span { font-size: 14px; } .card__num { font-size: 100px; margin: 0 8px 0 0; font-weight: 700; } @media (max-width: 700px) { .card__num { font-size: 70px; } } @media (max-width: 700px) { .card { width: 100%; height: 290px; margin-right: 0; float: none; } .card .card__front, .card .card__back { height: 290px; overflow: hidden; } } /* Demo */ main { text-align: center; } main h1, main p { margin: 0 0 12px 0; } main h1 { margin-top: 12px; font-weight: 300; } .fa-github { color: white; font-size: 50px; margin-top: 8px; } .tm-container { display: flex; justify-content: center; align-items: center; } .tm-letter { display:inline-block; font-size:30px; margin: 0 5px; margin-top: 10px; opacity: 0; transform: translateY(0); animation: letter-animation 6s ease-in-out infinite; } @keyframes letter-animation { 0%, 100% { opacity: 1; transform: translateY(0); } 10%, 40%, 60%, 90% { opacity: 1; transform: translateY(-10px); } 20%, 80% { opacity: 1; transform: translateY(0); } } #m-letter { animation-delay: 1.5s; } a { position: relative; display: inline-block; padding: 0px; } a::before { content: ''; position: absolute; top: 50%; /* Orta konumu */ left: 50%; /* Orta konumu */ transform: translate(-50%, -50%); width: 50px; height: 45px; border-radius: 50%; /* Eğer bir daire şeklinde efekt isteniyorsa */ box-shadow: 0 0 8px 4px rgba(110, 110, 110, 0.8); filter: blur(4px) brightness(1.5); / opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: -1; } a:hover::before { opacity: 1; } body.hoverEffect { background: radial-gradient(circle at center, #000000, #000033, #000066, #1a1a1a); } #gameCard { width: 300px; height: 450px; margin: 50px auto; padding: 20px; border-radius: 15px; box-shadow: 0 0 50px 10px #FFD700, 0 0 100px 20px #0000FF, 0 0 150px 30px #000033; background: rgba(0,0,0,0.7); color:#FFD700; text-align: center; border: 3px solid #FFD700; } #gameCardLink span { font-size: 18px; margin-right: 5px; font-weight: bold; } #gameCardLink span:last-child { font-size: 0.79em; vertical-align: super; opacity: 0.9; font-weight: bold; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); } #loading-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image:url('data:image/jpeg;base64,/); background-repeat: no-repeat; background-size: cover ; display: flex; justify-content: center; align-items: center; z-index: 9999; } .loader { border-top: 9px solid #00a2ed; border-radius: 80%; width: 12vw; height: 12vw; animation: spin 2s linear infinite; position: absolute; left: 44%; top: 46%; / transform: translate(-50%, -50%) rotate(0deg); /* Yuvarlak halkanın tam ortasında olması için bu dönüşümü kullanın. */ } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</code></pre> <pre><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <div id="loading-animation"> <div class="loader"></div> </div> <div id="main-content"> <div class="tm-container"> <div class="tm-letter" id="t-letter">T</div> <div class="tm-letter" id="m-letter">M</div> </div> <audio id="flipSound" preload="auto"> <source src="https://cdn.freesound.org/previews/321/321114_2776777-lq.ogg" type="audio/wav"> </audio> <main> <div id="gameCardLink"> <span>G</span> <span>a</span> <span>m</span> <span>e</span> <span> </span> <!-- Boşluk eklemek için span ekledik --> <span> </span> <span>C</span> <span> </span> <span>a</span> <span> </span> <span>r</span> <span> </span> <span>d</span> <span> </span> <span>s</span> <span>®</span> </div> <p><a href="https://github.com/murattasci06"><i class="fab fa-github"></i></a></p> </main> <ul> <li class="card" > <div class="card__flipper"> <div class="card__front"> <img src="https://gecbunlari.com/wp-content/uploads/2021/12/Spiderman-No-Way-Home.jpg" alt="Spiderman"> <p class="card__name"><span>Marvel</span><br>Spiderman</p> <p class="card__num">1</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/JfVOs4VSpmA?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#514d9b" stroke-width="35" /> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>1.89 Bil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://i.pinimg.com/736x/1e/f1/3d/1ef13dfa4b7b8c131302e242d1ec48d7.jpg" alt="Batman"> <p class="card__name"><span>DC</span><br>Batman</p> <p class="card__num">2</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/mqqft2x_Aa4?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#35a541" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>771 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://wallpapercave.com/wp/wp12279011.jpg" alt="Guardians_of_the_Galaxy_Vol_3"> <p class="card__name"><span>Marvel</span><br>Guardians_of_the_Galaxy_Vol_3</p> <p class="card__num">3</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/u3V5KDHRQvk?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#bdb235" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>845.4 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://wallpaperaccess.com/full/8940499.jpg" alt="Shazam"> <p class="card__name"><span>DC</span><br>Shazam2</p> <p class="card__num">4</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/AIc671o9yCI?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#db6623" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>462.5 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src="https://images2.alphacoders.com/131/1316679.jpeg" alt="Flash"> <p class="card__name"><span>DC</span><br>Flash</p> <p class="card__num">5</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/hebWYacbdvc?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#3e5eb3" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>560.2 Mil. $</span> </div> </div> </li> <li class="card"> <div class="card__flipper"> <div class="card__front"> <img src=" https://images3.alphacoders.com/121/1213553.jpg" alt="Dr_Strange_2"> <p class="card__name"><span>Marvel</span><br>Dr_Strange_2</p> <p class="card__num">6</p> </div> <iframe class="frame" width="225" height="340" src="https://www.youtube.com/embed/aWzlQ2N6qqg?autoplay=1&mute=1&vq=hd1080" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen ></iframe> <div class="card__back"> <svg height="180" width="180"> <circle cx="90" cy="90" r="65" stroke="#aa9e5c" stroke-width="35"/> <!-- Dış dairenin kenarı (yeşil) --> <circle cx="90" cy="90" r="83" fill="none" stroke="rgba(7, 50, 22, 255)" stroke-width="1" /> </svg> <span>955.8 Mil. $</span> </div> </div> </li> </ul> </div></code></pre> </div> </div> <p></p> </answer> </body></html>
还有一个关于它的问题，但我还没有在SO上找到完全相同的问题。 所以我尝试保留已翻译元素的子元素的 z-index 位置。 请参阅此处的问题：http://codepen.io...
我有两个来自 div 及其 ::before 的重叠点，并且希望左/主点出现在右/伪点的顶部。 div, div::之前{ 宽度：12px； 高度：12px； 边框：2px 实线
Chart.js 2.9.4：如何在显示回调标签时隐藏 fillText（动画）
当我用鼠标移动时，Chart.js 显示回调标签。没关系，但它下面显示动画文本。看起来很奇怪。我想在显示某些标签时隐藏所有动画或者我想要不透明
我有一个带有伪 ::before 元素的 div，其 z-index: -1 以便放置在实际 div 后面。 div 是一个“球”，伪元素是它的阴影。 还有一个按钮...
这就是我试图实现的设计： 每张卡片都有一个像这样的盒子阴影： 盒子阴影：16px 32px 56px rgba(143, 174, 207, 0.25); 以下是每张卡的 CSS： 。卡片{ 宽度：365...
Chrome 和 Safari 中的 CSS 列数和绝对位置（z-index？）
考虑以下示例：https://codepen.io/anon/pen/OOrMLm 可以单击每个白色块，这会显示一个小的红色弹出窗口，我需要用户在其中做出一些选择。 在火狐浏览器上，
我在盒子的两侧都有两个图像。它们都应该位于盒子后面，左侧图像的样式正确，右侧图像则不然。我无法让图像进入盒子后面并停留
我的位置有问题：粘性和 z 索引 我希望粘性元素中的模态被覆盖层覆盖。 使用位置：相对它可以工作：模态位于覆盖之前。但是...
我有一个导航襟翼。单击链接会触发转换，并且传输中的元素会放置在翻盖上方，就好像它具有更高的 z-index，但事实并非如此。 // <----
更改自定义标记的 zIndex 或移动到前面或模仿在反应本机地图上按下的标记
我有一个react-native-map，它通过在数组中加载数据并将图像显示为数组中信息的标记来工作。我有一个在地图上运行的react-native-snap-carousel，当它卡入pl时......
我正在阅读这篇关于 z-index 的文章并有一个问题。 在此输入图像描述 z-index 就像图层一样，对吗？那么layer(z-index) 1应该在顶部，第二层，第三层等等。 我怎么...
当要淡入淡出的 div 位于另一个 div 下时，鼠标悬停和鼠标移出淡入/淡出问题
我有一系列的框，当您将鼠标悬停在一个框上时，我想淡出一个黑色蒙版，该蒙版会在每个框上淡出，并在您将鼠标移出每个框时淡入蒙版。不过eac里也有文字...
/* ************************** */ /*低于1350px（较小的桌面）*/ /* ************************** */ @media（最大宽度：84.5em）{ .粘滞便笺{ 宽度：30rem； 高度：30rem； } .m...
下面您会发现模态的指定 z 索引高于模态背景的 z 索引的情况。尽管如此，在很多情况下背景会位于模态之上......
我正在为一个学校项目做一个十字路口。 我有 4 条车道，其中有一个矩形作为在其上行驶的汽车。 问题是 1 号车和 2 号车在十字路口下行驶，而 Panel.ZIndex 似乎没有...
我在透明背景上有文本，如下所示： http://jsfiddle.net/L9ggc06c/ 然而，文本仍然应用透明度。 #内容a:悬停.text p{ -ms-filter: "progid: