如何在所有元素上顯示textarea？

Question

我有一個textarea元素的簡單HTML代碼。當我點擊它時，我需要將不透明度設置爲0.8，然後在body上顯示textarea。

如何做到這一點？

我想：

body { 
    opacity: 0.8; 
z-index: 1 
} 

textarea { 
    position:relative: 
z-index:100; 
} 

Answer 1

如果設置在機體本身的不透明度，其所有的孩子會得到它了，所以對於能夠正常工作，它應該是這個樣子，你用.dimmer來做實際的半透明。

這種方式，你可以有很多項目的工作類似

.dimmer { 
 
    position: fixed; 
 
    left: 0; top: 0; 
 
    right: 0; bottom: 0; 
 
    display: none; 
 
    background: white; 
 
    opacity: 0.8; 
 
    z-index: 99;   /* immeadiate below textarea */ 
 
} 
 

 
input, textarea { 
 
    position: relative; 
 
} 
 

 
input.use-dimmer:focus, 
 
textarea.use-dimmer:focus { 
 
    z-index: 100; 
 
} 
 
input.use-dimmer:focus ~ .dimmer, 
 
textarea.use-dimmer:focus ~ .dimmer { 
 
    display: block; 
 
}

<p>hello there, this is just a text to show how this work</p> 
 

 
<textarea class="use-dimmer">sample text</textarea> 
 
<br> 
 
<input class="use-dimmer" value="sample text"/> 
 

 
<div class="dimmer"></div>

Answer 2

我相信你想達到什麼是集中用戶的注意力集中在textarea。所以，你幾乎有解決方案。

textarea:focus { 
 
    box-shadow: 2px 2px 3px #66dd88, -2px -2px 2px #66dd88; 
 
}

這樣，當用戶點擊textarea：除了使用position（由@Andrey費奧多羅夫提到的）權值，如下所示您應該使用:focus僞類，它與頁面的其他部分截然不同。 注意：從您提出問題的標籤中，我認爲您不想使用Javascript。

Answer 3

$(document).ready(function() { 
 
    $("body").on("focus", "textarea", function() { 
 
    $("body").addClass("textareaded"); 
 
    }); 
 
    $("body").on("blur", "textarea", function() { 
 
    $("body").removeClass("textareaded"); 
 
    }); 
 
});

.textareaded .content { 
 
    opacity: 0.5; 
 
} 
 
.textareaded textarea { 
 
    position: fixed; 
 
    top: 10px; 
 
    width: 90%; 
 
    left: 5%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
    <p>Content</p> 
 
</div> 
 
<textarea></textarea>