在CSS中改变子元素的不透明度[重复]。

Question

这个问题在这里已经有了答案:

我不想在CSS中继承父代的子代不透明度。 (14个答案)

我可以只对div的背景图片设置不透明度吗？ (8个回答)

封闭 21天之前.

我试图将表单中的一个子元素（按钮）的不透明度改为不透明度：1。

父表单的不透明度为：0.6；我不知道如何覆盖它。

Answer 1

为了让子元素与 opacity: 1, 你需要使用 background 财产，因为 opacity 适用于整个元素，包括子元素。:

body {
  background-image: url("https://i.pinimg.com/originals/4a/06/52/4a065201509c0fc50e7341ce04cf7902.jpg");
}

form {
  padding: 25px;
  background: rgba(0, 0, 0, 0.4);
}

form button {
  opacity: 1 !important;
}

<form>
  <input type="text" />
  <button>Submit!</button>
</form>

Answer 2

---

你不能通过使用 !important 或简单地添加一个css "opacity:1;" 来覆盖它，因为按钮对象是一个子对象，是父对象渲染内容的一部分。

但是你可以使用js覆盖它，或者使用css":not(X) "伪类选择器，其中X是你选择的 "对象"、"id "或 "类"。

例如："不(X) "伪类选择器，其中X是你选择的 "对象"、"id "或 "类"。

.parent :not(button){opacity:0.6;} 

<div class="parent">
<h1>some text here or other content than just a button </h1>
<div>some text here or other content than just a button </div>
<p>some text here or other content than just a button </p>
<button> im going to have my own opacity</button>

</div>

Answer 3

你将需要做这样的表格 opacity: 1; 并使其内的所有东西，除了按钮 opacity: 0.6;.

你可以通过在表单中除了按钮之外的所有内容都用一个 class，并将其设置为 opacity: 0.6;.

Answer 4

你可以让所有的项目在表格中，这是不是一个。<button> 不透明度为0.6。

form:not(button) {
  opacity: 0.6;
}

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="fname">Last Name</label>
  <input type="text" id="lname" name="lname">
  <button>Submit</button>
</form>