除了一个元素外，如何使页面变灰？
[英]How can I grey out page except for one element?
问题描述
如何在页面上制作灰色叠加层，但该页面中的一个元素没有变灰？
有很多这样的问题被问到，但没有一个有效：
- 为打印视图隐藏除一个 div 之外的所有元素- 这对我的情况不起作用，因为我不想隐藏所有内容。
- 禁用除 DIV 元素之外的所有内容- 第二个答案似乎与我的相似。 但即使我更改了我想要的未灰色元素的 z-index，整个页面也会保持灰色。 另外，我发现使用
div和iframe没有区别。 - 想要使整个页面除指定 div 外都以灰度显示- 这个只是使其他所有内容都变成灰度，但我不想要那样。
在下面的示例中，我希望除<input class="edit-title" value="Site Title">之外的所有内容都变灰。 现在我的代码使大部分页面变灰，如果我改变，我可以变灰整个页面
.overlay {
z-index: -1;
}
到
.overlay {
z-index: 0;
}
有没有办法将除<input class="edit-title" value="Site Title">之外的所有内容都变灰？
html { box-sizing: border-box; } .overlay { top: 0; bottom: 0; right: 0; left: 0; position: absolute; background: rgba(0, 0, 0, .4); z-index: -1; } edit-title { z-index: 100; } *, *:before, *:after { box-sizing: inherit; } body, input, optgroup, select, textarea { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } body { font-size: 13px; line-height: 1.4; color: #555; margin: 0; padding: 0; background: white; overflow-x: hidden; } .button { font-weight: bold; color: #fff; border: 1px solid #44aa76; border-width: 0 0 3px 0; background-color: #66cc98; padding: 5px; border-radius: 6px; text-align: center; } .button:focus, .button:hover, .active { cursor: pointer; background-color: #44aa76; color: #fff; outline: none; } header { width: 100%; border-bottom: 1px solid #eee; display: flex; justify-content: center; padding: 30px 0 10px; margin-bottom: 10px; } input { font-size: 13px; border: 1px solid #eee; border-radius: 4px; padding: 8px; } input:focus { outline: none; border-color: #ddd; } [type="search"] { -webkit-appearance: textfield; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } .search { display: flex; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 10px; } .search input[type="search"] { width: 100%; } label { font-size: 13px; margin-right: 5px; } .save-button { width: 30px; height: 30px; line-height: 27px; padding: 0; margin: 0 10px; } h1 { margin: 0; padding: 0; line-height: 1; font-size: 22px; padding: 4px 0; } .container { position: relative; padding: 0 15px; width: 360px; max-width: 100%; margin: 0; } .reading-list { margin-bottom: 15px; } .reading-item { border-radius: 3px; padding: 0; margin: 10px 0 0 0; background-color: #f7f7f7; position: relative; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.05); transition: all 0.5s ease 0s; } .reading-item .item-link { text-decoration: none; display: block; width: 100%; color: #555; padding: 10px 50px 10px 56px; min-height: 56px; } .reading-item .item-link:focus, .reading-item .item-link:hover { color: #66cc98; background-color: #fff; } .reading-item .item-link span { display: block; } .reading-item .item-link span.title { font-weight: bold; } .reading-item .favicon { position: absolute; top: 10px; left: 10px; width: 36px; height: 36px; border-radius: 4px; border: 1px solid #ccc; padding: 1px; } .reading-item .item-link:hover .favicon { border-color: #66cc98; } .reading-item .delete-button { position: absolute; top: 5px; right: 5px; border-radius: 100%; padding: 0; width: 20px; height: 20px; border: 0; background-color: transparent; color: #ccc; transform: rotateZ(0) scale(1); transition: transform 0.3s ease, box-shadow 0.5s ease; } .reading-item .edit-button, .reading-item .save-button { position: absolute; bottom: 10px; right: 10px; padding: 0; width: 10px; height: 10px; border: 0; background-color: transparent; color: #ccc; border-radius: 0; margin: 0; } .reading-item .delete-button:hover { background-color: #ccc; color: #fff; transform: rotateZ(90deg) scale(2); box-shadow: 1px 0 1px rgba(0, 0, 0, 0.15); }
<body class="popup-page"> <div class="container"> <header> <h1 data-localize="appName">Reading List</h1> <button class="button save-button" id="savepage">+</button> </header> <div class="search"> <label for="my-search" data-localize="search">Search</label> <input type="search" id="my-search" name="search" autocomplete="off"> </div> <div class="reading-list" id="reading-list"> <div class="reading-item read"> <a value="www.example.com" class="button delete-button">×</a> <a class="item-link" href="www.example.com" alt="Reading List"> <input class="edit-title" value="Site Title"> <span class="host">example.com</span> </a> <img src="/icons/save.svg" class="button save-button"></div> </div> </div> <div class="overlay" id="overlay"></div> </body>
2 个解决方案
解决方案1
7 已采纳 2017-12-12 17:52:45
可以使用 css box-shadow做到这一点。
.box{display:inline-block; width:100px; height:100px; margin-top:50px; text-align:center; padding-top:2em} .box.selected{ box-shadow: 0 0 0 99999px rgba(0, 0, 0, .5); }
<div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box selected">Box 3</div> <div class="box">Box 4</div>
使用 4 个叠加元素的替代解决方案
叠加层根据突出显示的元素位置和尺寸进行定位。
顶部和底部叠加层的宽度为 100%。 顶部只需要将其高度设置为突出显示元素的顶部偏移值。 底部的将其顶部设置为元素的底部。
左右与突出显示的元素高度相同，并到达页面的每个边缘以填充顶部和底部叠加层之间的孔
var $el = $('.box.selected'), $oLay = $('.overlay'), elPos = $el.offset(),// coordinates of element within document elH = $el.height(), elW = $el.width(); $oLay.filter('.top').height(elPos.top); $oLay.filter('.left').css({ top: elPos.top, height: elH, width: elPos.left }); $oLay.filter('.right').css({ top: elPos.top, height: elH, left: elPos.left + elW }); $oLay.filter('.bottom').css({ top: elPos.top + elH });
.box { display: inline-block; width: 100px; height: 100px; margin-top: 50px; text-align: center; padding-top: 2em } .overlay { position: absolute; background: rgba(0, 0, 0, .5); z-index: 100 } .overlay.top { top: 0; left: 0; width: 100% } .overlay.left { left: 0 } .overlay.right { right: 0 } .overlay.bottom { width: 100%; left: 0; bottom: 0 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box selected">Box 3</div> <div class="box">Box 4</div> <div class="overlay top"></div> <div class="overlay left"></div> <div class="overlay right"></div> <div class="overlay bottom"></div>
解决方案2
1 2017-12-12 17:45:58
您可以在<a class="item-link" href="www.example.com" alt="Reading List">放置第二个叠加层。 所以：
<a class="item-link" href="www.example.com">
<div class="overlay"></div>
…
</a>
在 CSS 中：
.item-link {
position: relative
}
当用户单击链接到下一页的那些项目时，如何显示灰色并显示网页中的负载？
[英]how can I grey out and show loading in the web page when user clicks on those items that are linked to next page?
我怎样才能在登录页面以外的任何地方渲染 Nav 组件？
[英]How can i render out the Nav component everywhere except the Login Page?
如何检测元素和其中一个元素以外的所有元素的点击？
[英]how can I detect a click on an element and all the elements inside except one?
如何隐藏页面上除一个 div 之外的所有内容，然后在单击按钮后显示它？
[英]How can I hide everything on a page except for one div, and then show it once a button is clicked?
我无法弄清楚我错过了什么，除了一个选项，代码100％工作
[英]I can't figure out what I'm missing, code works 100% except for one option
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.