2
ページにグレーアウトされたオーバーレイを作成できますが、そのページの1つの要素がグレー表示されないようにするにはどうすればよいですか？1つの要素を除いてページをグレーアウトするにはどうすればよいですか？
このような多くの質問がありますが尋ねたが、それらのどれも動作しません：
- Hide all elements except one div for print view - 私はすべてを非表示にしたくないので、この1は私の状況では動作しません。
- Disable everything except a DIV element - これは2番目の回答が私の場合と似ています。しかし、たとえ私が望んでいる未塗装の要素のZ-インデックスを変更したとしても、ページ全体がグレーになっています。また、
divとiframeの間に違いは見当たりませんでした。 - Want to make the whole page in grayscale except specified div - これは他のすべてをグレースケールにしていますが、私はそれを望んでいません。
以下の例から、私は<input class="edit-title" value="Site Title">を除いてすべてが灰色になりたいと思っています。私は
.overlay {
z-index: 0;
}
に
.overlay {
z-index: -1;
}
を変更した場合、今のページのほとんどのうちに私のコードのグレーは、私が<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>https://jsfiddle.net/qyca9489/
の間の穴を埋めるためにページの各エッジに達します。あなたが置いたものより少し複雑ですが、それはうまくいきました。 – Whitecat