如何淡化背景图像

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().

如何淡化背景图像

How to fade background images

javascript

css

animation

transition

css-transitions