Html 如何向父div添加不透明度而不将其应用于子div

我将

opacity

添加到一个包裹中，在

input

字段后面形成背景。我只希望包装具有

不透明度

，但它也将其提供给所有输入。如何仅对环绕输入应用

不透明度

我做了一把小提琴来显示它的样子

我将不透明度添加到此

div

：

.registerWrap {
    border-radius: 10px;
    border: 3px solid white;
    width: 45%;
    height: 500px;
    margin: 100px auto 40px auto;
    padding: 40px;
    text-align: center;
    background-color: #282828;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}

#换行{
背景颜色：灰色；
}
.RegisterRap{
边界半径：10px；
边框：3倍纯白；
宽度：45%；
高度：500px；
保证金：100px自动40px自动；
填充：40px；
文本对齐：居中；
背景色:#282828 ;；
不透明度：0.9；
过滤器：α（不透明度=90）；
/*适用于IE8及更早版本*/
}
.inputbar[类型=文本]{
显示：块；
宽度：400px；
利润率：10px自动；
字号：18px；
填充：10px；
-webkit过渡：所有0.40都易于输入输出；
-moz转换：所有0.40都易于输入输出；
-ms转换：所有0.40秒都易于输入输出；
-o型过渡：所有0.40都易于输入输出；
大纲：无；
边框：1px实心#DDDDDD；
}
.输入栏：悬停{
-moz盒阴影：0 10px#ccc；
-网络工具包盒阴影：0 10px#ccc；
盒影：0 10px#ccc；
}
.inputbar[类型=文本]：焦点{
边框：1px实心#800000；
-moz盒阴影：0 1px 1px rgba（128,0,0,1）；
-webkit盒阴影：0 1px 1px rgba（128,0,0,1）；
长方体阴影：0 1px 1px rgba（128,0,0,1）；
}
#registerButton[类型=提交]{
利润率：15px自动；
宽度：425px；
字体大小：20px；
字体大小：粗体；
填充：14px；
光标：指针；
背景色：#800000；
边界：无；
颜色：#FFFFFF；
}
#注册表按钮[类型=提交]：悬停{
-moz盒阴影：0 10px#ccc；
-网络工具包盒阴影：0 10px#ccc；
盒影：0 10px#ccc；
}

---

您实际上可以为

包裹的
背景色设置
rgba
颜色值，如下所示。值
rgba（40,40,40,0.9）
只不过是
rgb
等价于添加到元素中的十六进制颜色
#282828
和
不透明度

一个可能的缺点是，
rgba
颜色值无效。如果您需要支持这些浏览器，那么此方法不适合您

.registerWrap {
    border-radius: 10px;
    border: 3px solid white;
    width: 45%;
    height: 500px;
    margin: 100px auto 40px auto;
    padding: 40px;
    text-align: center;
    background-color: rgba(40, 40, 40, 0.9);
    /* For IE8 and earlier */
}

下面是一个示例片段，其中图像作为包裹的背景，以使效果更为明显


#换行{
背景：url(http://lorempixel.com/600/400);
}
.RegisterRap{
边界半径：10px；
边框：3倍纯白；
宽度：45%；
高度：500px；
保证金：100px自动40px自动；
填充：40px；
文本对齐：居中；
背景色:#282828 ;；
不透明度：0.9；
过滤器：α（不透明度=90）；
/*适用于IE8及更早版本*/
}
.inputbar[类型=文本]{
显示：块；
宽度：400px；
利润率：10px自动；
字号：18px；
填充：10px；
-webkit过渡：所有0.40都易于输入输出；
-moz转换：所有0.40都易于输入输出；
-ms转换：所有0.40秒都易于输入输出；
-o型过渡：所有0.40都易于输入输出；
大纲：无；
边框：1px实心#DDDDDD；
}
.输入栏：悬停{
-moz盒阴影：0 10px#ccc；
-网络工具包盒阴影：0 10px#ccc；
盒影：0 10px#ccc；
}
.inputbar[类型=文本]：焦点{
边框：1px实心#800000；
-moz盒阴影：0 1px 1px rgba（128,0,0,1）；
-webkit盒阴影：0 1px 1px rgba（128,0,0,1）；
长方体阴影：0 1px 1px rgba（128,0,0,1）；
}
#registerButton[类型=提交]{
利润率：15px自动；
宽度：425px；
字体大小：20px；
字体大小：粗体；
填充：14px；
光标：指针；
背景色：#800000；
边界：无；
颜色：#FFFFFF；
}
#注册表按钮[类型=提交]：悬停{
-moz盒阴影：0 10px#ccc；
-网络工具包盒阴影：0 10px#ccc；
盒影：0 10px#ccc；
}

我已经更新了您的CSS（）：

我补充说：

.registerWrap * {
    opacity:1;   
}

设置不透明度将影响所有子元素。相反，您可以只设置背景色不透明度，如下所示：

background-color: rgba(40, 40, 40, .9); /* last value is opacity */

你有没有尝试过
.registerrap>*{opacity:1；}
没有，但只是尝试了，没有用。我已经更新了你的JS提琴并发布了答案。对我来说似乎很有效，非常有效。非常感谢。@Paul:很高兴能帮上忙，朋友：）
background-color: rgba(40, 40, 40, .9); /* last value is opacity */