如何淡化背景图像

Question

更新：这适用于 Chrome，我如何才能让它在 Firefox 上工作

当我将鼠标悬停在特定元素上时，我试图淡化连续的背景图像。 例如，如果我有三个文本元素，并且如果我将鼠标悬停在一个元素上，我希望背景图像具有过渡效果。

这是我的代码笔： https ://codepen.io/tmocodes/pen/MWwXxZO ? editors = 0110
这是我的灵感来源： https : //www.awwwards.com/inspiration/fullscreen-menu-66nord

 let seattleEl = document.querySelector("#Seattle"); let ecuadorEl = document.querySelector("#Ecuador"); let arizonaEl = document.querySelector("#Arizona"); let imgArea = document.querySelector(".container"); ecuadorEl.addEventListener("mouseover", e => { imgArea.style.background = "url('https://www.telegraph.co.uk/content/dam/Travel/2019/November/ecuador.jpg')"; imgArea.classList.add = 'bg' }); seattleEl.addEventListener("mouseover", e => { imgArea.style.background = "url('https://cdn.vox-cdn.com/thumbor/avHeJenMsyJoJ3WBGHl24QWnybk=/0x0:7360x4912/1200x675/filters:focal(3092x1868:4268x3044)/cdn.vox-cdn.com/uploads/chorus_image/image/66498601/shutterstock_482690140.0.jpg')"; imgArea.classList.add = 'bg' });

 *{ padding:0; margin:0; box-sizing:border-box } .container{ background: url("https://www.telegraph.co.uk/content/dam/Travel/2019/November/ecuador.jpg"); background-size: cover !important; background-repeat: no-repeat !important; background-position: center !important; height:100vh; transition: all .3s; h1{ color:white; opacity: .6; font-family: Helvetica; font-size: 48px; padding: 10px; cursor:pointer; display:block; width:min-content; height:min-content; margin-bottom:10px; &:hover{ opacity:1; } } } @keyframes transition { from { opacity:0 } to { opacity:1 } } .bg{ background-color: black; z-index:10; animation: transition .3s !important; transition: all .2s; }

 <div class="container"> <h1 id="Ecuador">Ecuador</h1> <h1 id="Seattle">Seattle</h1> <h1 id="Arizona">Arizona</h1> </div>

Answer 1

也许这会有所帮助？

 //<![CDATA[ /* js/external.js */ let get, post, doc, html, bod, nav, M, I, mobile, S, Q, hC, aC, rC, tC, inArray, isNum, isInt; // for use on other loads addEventListener('load', ()=>{ get = (url, success)=>{ const x = new XMLHttpRequest; x.open('GET', url); x.onload = ()=>{ if(success)success(JSON.parse(x.responseText)); } x.send(); return x; } post = (url, send, success)=>{ const x = new XMLHttpRequest; x.open('POST', url); x.onload = ()=>{ if(success)success(JSON.parse(x.responseText)); } if(typeof send === 'object' && send && !(send instanceof Array)){ if(typeof FormData !== 'undefined' && send instanceof FormData){ x.send(send); } else{ let s, r = []; for(let p in send){ s = send[p]; if(typeof s === 'object')s = JSON.stringify(s); r.push(encodeURIComponent(p)+'='+encodeURIComponent(s)); } x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); x.send(r.join('&')); } } else{ throw new Error('send argument must be an Object'); } return x; } doc = document; html = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id); mobile = nav.userAgent.match(/Mobi/i) ? true : false; S = (selector, within)=>{ const w = within || doc; return w.querySelector(selector); } Q = (selector, within)=>{ const w = within || doc; return w.querySelectorAll(selector); } hC = (element, className)=>{ return element.classList.contains(className); } aC = (element, className, func)=>{ element.classList.add(className.trim()); if(func)func(element); return (className, func)=>{ return aC(element, className, func); } } rC = (element, className, func)=>{ element.classList.remove(className.trim()); if(func)func(element); return (className, func)=>{ return rC(element, className, func); } } tC = (element, className, yFunc, nFunc)=>{ const c = element.classList, n = className.trim(); if(c.contains(n)){ c.remove(n); if(nFunc)nFunc(element); } else{ c.add(n); if(yFunc)yFunc(element); } return (className, yFunc, nFunc)=>{ return tC(element, className, yFunc, nFunc); } } inArray = (mixed, array)=>{ if(array.indexOf(mixed) === -1){ return false; } return true; } isNum = mixed=>typeof mixed === 'number' && !isNaN(mixed); isInt = mixed=>Number.isInteger(mixed); // put below on another page using a load Event - except the end load line and below function FadeMaker(faderElement, placesElement){ const places = []; let place; this.addPlace = (name, background)=>{ const h = M('h1'), d = M('div'); aC(d, 'fadeOut'); d.style.backgroundImage = 'url("'+background+'")'; h.textContent = name; h.onmouseenter = ()=>{ rC(place, 'fadeIn'); aC(place, 'fadeOut'); rC(d, 'fadeOut'); aC(d, 'fadeIn'); place = d; } placesElement.appendChild(h); faderElement.appendChild(d); places.push([h, d]); return this; } this.make = ()=>{ place = places[0][1]; rC(place, 'fadeOut'); places.forEach(a=>{ aC(a[1], 'fade'); }); return this; } } const fm = new FadeMaker(I('fader'), I('places')); fm.addPlace('Equador', 'https://www.telegraph.co.uk/content/dam/Travel/2019/November/ecuador.jpg').addPlace('Seattle', 'https://cdn.vox-cdn.com/thumbor/avHeJenMsyJoJ3WBGHl24QWnybk=/0x0:7360x4912/1200x675/filters:focal(3092x1868:4268x3044)/cdn.vox-cdn.com/uploads/chorus_image/image/66498601/shutterstock_482690140.0.jpg').addPlace('Arizona', 'https://azgovernor.gov/sites/default/files/styles/panopoly_image_original/public/6871930-arizona.jpg?itok=sbFgZG8r').make(); }); // end load //]]>

 /* css/external.css */ *{ box-sizing:border-box; padding:0; margin:0; } html,body,.container,#fader,.fade{ width:100%; height:100%; } .container{ position:relative; } .container>div,.fade{ position:absolute; } .fade{ background-position:center; background-size:cover; transition:opacity 0.5s ease-in-out; } .hide{ display:none; } #places>h1{ cursor:pointer; color:#fff; font:bold 48px Helvetica; padding:10px 20px 10px; } .fadeOut{ opacity:0; } .fadeIn{ opacity:1; }

 <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> <head> <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' /> <title>Title Here</title> <link type='text/css' rel='stylesheet' href='css/external.css' /> <script src='js/external.js'></script> </head> <body> <div class='container'> <div id='fader'></div> <div id='places'></div> </div> </body> </html>

您可以忽略FadeMaker之上的大部分 JavaScript ……但是将来一直使用这些东西。 请注意， FadeMaker接受两个参数。 一个是所有推子元素所在的位置，一个是元素名称所在的位置。 一旦你创建了一个new实例，你就可以在完成后使用fadeMakerInstance.addPlace(yourNameHere, yourURLHere)和.make() 。 请注意，您不必像我在示例中显示的那样链接方法。 一旦你有了实例变量，你就可以像fm.addPlace(nameOne, urlOne); fm.addPlace(nameTwo, urlTwo); fm.make()一样fm.addPlace(nameOne, urlOne); fm.addPlace(nameTwo, urlTwo); fm.make()执行fm.addPlace(nameOne, urlOne); fm.addPlace(nameTwo, urlTwo); fm.make() fm.addPlace(nameOne, urlOne); fm.addPlace(nameTwo, urlTwo); fm.make() fm.addPlace(nameOne, urlOne); fm.addPlace(nameTwo, urlTwo); fm.make() 。