如何淡化背景图像

Question

更新：THIS在CHROME上工作，我如何才能让THIS在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()一样立即执行。