Question

我有一个带有一个textarea元素的简单HTML代码。当我点击它时，我需要将opacity 0.8设置为body并在body上显示textarea。

怎么做？

我试过了：

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

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

Answer 1

如果你在身体上设置不透明度，它的所有孩子也会得到它，所以为了使它正常工作，它应该看起来像这样，你使用.dimmer来实现半透明度。

这样你就可以有很多类似的工作

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

我相信你想要达到的目的是将用户的注意力集中在textarea上。所以，你几乎有解决方案。除了使用position的正确值（如@Andrey Fedorov所述）之外，您应该使用:focus伪类，如下所示：

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

这样，当用户点击textarea时，它就会与页面的其余部分区分开来。注意：从您提出问题的标签中，我假设您不想使用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>

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

3 个答案: