使用 slider 更改 web 页面的亮度
[英]changing the brightness of a web page using the slider
问题描述
有一个任务摆在我面前——当改变 slider 参数来改变整个页面的亮度时，我尝试了带有全屏 div 的选项，但它阻止了对 rest 元素的访问，我也尝试设置正文的过滤器参数，但在这种情况下，页面构建出错了
1 个解决方案
解决方案1
1 已采纳 2023-02-02 00:42:05
您需要做的就是在<body>上使用filter: brightness(..) ，使用hsl(..) colors 巧妙地利用您的网站 colors 并更改它们的亮度值，或者混合使用这两种方法。
所有这些都可以通过范围 slider修改单个--brightness自定义变量与一行 Javascript 轻松完成。只需启用/禁用 CSS 中提到的各种选项。
提醒一下：如果没有适当的最小可重现示例，SO 上的任何人都无法帮助您解决特定问题......
我创建了一个小演示来展示上面的内容：
/* Custom variable to hold overall brightness percentage modified with the range slider min [0.25] max [1.75] default value [1]. Modified with slider "oninput" JS... */ html { --brightness: 1 }.webpage { margin-top: 3rem; /* Default color setting */ background-color: hsl(0,0%, 41.2%); color: hsl(0,0%, 100%); /* Override by changing (L)ightness parameter of HSL color */ background-color: hsl(0,0%, calc(var(--brightness) * 41.2%)); color: hsl(0,0%, calc(var(--brightness) * 100%)); /* disable when using filter */ /* Modify overall brightness */ /* filter: brightness(var(--brightness)); /* enable to see difference with HSL */ /* Modify overall brightness and invert B/W */ /* filter: brightness(var(--brightness)) invert(var(--brightness)); /* enable to see difference with HSL */ } /* Extras, just to make the demo look good */ /********************************/ /* some convenient global rules */ /********************************/ *, ::before, ::after { box-sizing: border-box } html, body { width: 100%; max-width: 100% } html { scroll-behavior: smooth } body { min-height: 100vh; margin: 0; line-height: 1.5 } /************************************************/ /* element responsive behavior [STABLE] */ /************************************************/ /* https://codepen.io/renevanderlende/pen/YzEaKvO?editors=1100 */ /* responsive base font size using y = mx + b 'y-intercept form' => y = 0.00625x + 12 */ html { font-size: calc(0.625vmin + 0.75rem) } /* (320,14)(1280,20) */ body { font-size: 1rem; line-height: 1.5 } /* Generic page spacers, root font size independent, also y = mx + bs T/B: (360,0)(2160, 90) => y = 0.05x - 18 <= base 90, 72 at 1920x1080 L/R: (640,0)(1920,448) => y = 0.35x - 224 <= base 160, 360x640 full screen */:root { --min-pad: 1rem } [padded] { padding: max(var(--min-pad),calc(5vmin - 18px)) max(var(--min-pad),calc(35vw - 224px)) } [padded="1"] { padding: var(--min-pad) } /* minimal padding */ [padded="0"] { padding: 0 } /* no padding */ label { position: fixed; top: 0; width: 100%; display: inline-flex; flex-direction: column; background-color: white; cursor: pointer; }
<label>Brightness <input type="range" min="0.25" max="1.75" value="1" step="0.01" oninput="javascript:document.documentElement.style.setProperty('--brightness', this.value)"> </label> <div padded class="webpage"> <h2>Lorem Ipsum dolor...</h2> <p>Lorem ipsum dolor sit amet, mel omnium vulputate percipitur ex. Ex vel quas inani appellantur. Iusto dolore cetero duo ad. Per facer mediocrem eu. An legimus voluptatibus eam, cetero aperiri consectetuer sit id, hinc sale evertitur cum ei. </p> <p> Erant maiorum iracundia ius ne. Veri summo clita in usu, possim apeirian interesset usu no. Malorum repudiandae cu eum, ad vel putant torquatos. Idque feugait aliquando his eu, sed te sanctus omittam placerat. Ex eum ridens euismod facilisis, sea id lorem reformidans complectitur. </p> <p> Qui purto elitr at, at corrumpit signiferumque mea. Vix quidam consulatu ei, no esse vocibus convenire usu, est te erroribus imperdiet. Soleat molestiae deseruisse ei sea, ea sale mollis nam. Ut eam eius vidit consulatu. </p> <p> Amet justo ex mel. Utroque accusata cu nam. Et vel mucius audiam rationibus, mea regione alterum ne. Perpetua persequeris te eos, no sale mnesarchum quo. Atomorum reformidans ea per, ne timeam tractatos philosophia usu. </p> <p> Id vix atomorum scribentur. Sit habeo ancillae facilisi in. Purto tacimates no mei, in duo nemore senserit, inani debet ut mea. Eu homero timeam adversarium vis, vix molestie luptatum atomorum ei. Ut eos sumo atqui, sumo ponderum iudicabit vix ne, ea errem maiorum postulant sea. </p> <p> Et nam putant ancillae, et vel luptatum vivendum efficiendi, eos diam nulla legendos an. Putent fastidii mediocritatem sit in. Id per odio delenit complectitur. Altera mentitum efficiendi ex usu, an veri tation partiendo quo. In nominavi recteque adversarium mel, duo suas populo eu. </p> <p> Et integre facilisi sea, et agam utinam nam. Facilis laboramus democritum sit at, eos sint probatus iracundia an, duo ei eirmod malorum. Pro quem nihil aliquip at. Eum dico debet graece ut, has tamquam intellegat an. </p> <p> Sea no magna dolores corrumpit. Nam nulla hendrerit te, vivendum dissentiet eu vix, at quas zril putent vim. Eu pro maiestatis incorrupte, has magna posse ei, pri cetero quaerendum ut. Autem justo atqui usu id, sumo ipsum fierent pro ea. Oporteat tacimates suavitate per ei, molestie delicata at pro, erant prompta quo no. </p> <p> Id qui elit partiendo iracundia, ei eos nostrud graecis. No postulant ullamcorper signiferumque qui, eu pri augue vidisse eligendi, corpora iudicabit et eos. Ea purto impetus per, porro partiendo efficiendi ex mel. Cum vero eius epicuri eu. An virtute albucius nec, hinc ceteros referrentur cu mei, audiam admodum ad nam. </p> <p> Mel albucius qualisque ut, mutat simul omnesque at vim, te eam minim bonorum. Iisque insolens atomorum nam et. No nihil epicuri efficiantur pro. No mel vide argumentum, nonumes interesset nec ex. Duis commodo placerat pro cu, mei laudem aliquip numquam ut, case latine salutatus eum ne. Ad tollit convenire mei, nam te amet eruditi conclusionemque. </p> </div>
将 slider 的值从 web 页面返回到更改 slider 的程序
[英]Returning the value of a slider from a web page to a program on change of slider
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.