CSS：仅使背景透明度改变，而不是内部文本

Question

CSS：仅使背景透明度改变，而不是内部文本

12

我有一个注册表单框，我非常喜欢它的背景透明度为25% (85)，但我注意到文本和表单元素也稍微变暗了一点。因此，我想知道如何仅针对边框和背景进行这样的操作，而不影响盒子内部的内容?

#regForm {
z-index:11;
position: absolute;
top: 120px;
left: 500px;
background: #000;
color: #FFF;
width: 500px;
height: 240px;
border: 6px solid #18110c;
text-align: center;
margin: 40px;
padding: 1px;
  opacity: 0.85;
  -moz-opacity: 0.85; /* older Gecko-based browsers */
  filter:alpha(opacity=85); /* For IE6&7 */

}

- Karem

5个回答

6

如果您只需要CSS解决方案，那么RGBA是最好的选择。对于旧浏览器无法使用RGBA的情况，可以使用纯色作为备选方案。

.stuff {
  background-color: rgb(55, 55, 55);
  background-color: rgba(55, 55, 55, 0.5);
}

您还可以使用图像作为备选方案：

.stuff2 {
  background: transparent url(background.png);
  background: rgba(0, 0, 0, 0.5) none;
}

这是让所有版本的IE浏览器支持这个功能所需的全部内容：http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer。

- ase

4

你最好使用半透明的PNG作为背景，或者使用RGBa设置背景和边框的颜色。如果你不介意需要额外的标记来创建一个可变宽度容器，PNG将很有效，但是在IE6中不支持PNG（如果这是一个问题）。RGBa在浏览器中的支持范围较窄，但如果透明度仅用于视觉效果，则可以使用一些渐进增强技术。对于RGBa，您需要添加一个额外的回退行。

#regForm {
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    border-color: rgb(24, 17, 12);
    border-color: rgba(24, 17, 12);
}

任何不认识RGBa声明的浏览器将使用普通的RGB。

CSS-Tricks关于跨浏览器使用RGBa的文章

- derekerdmann

1

从2015年开始，您应该使用rgba。IE6幸运地已经绝迹了，在一些偏僻的IE6中会出现比背景颜色更糟糕的问题。 - Dan Dascalescu

1

不需要像应用div的位置一样做那些事情，也不需要使用不透明度。这里有一个非常简单的方法来实现它：background: rgba(0, 0, 0, 0.6);只需要使用带有不透明度值的背景颜色即可。

- Sumit

1

这基本上是与Derek相同的答案，只是没有提到PNG。 - Dan Dascalescu

-2

无法实现：任何子元素都会继承父元素的不透明度。

在您的情况下，很容易解决 - 只需使用两个 div。将背景图像放在其中一个中并应用不透明度，将内容放入第二个中。使用 position: absolute 和 z-index 将它们叠放在一起。

- Pekka

不要使用其他答案建议的方式，直接使用rgba。 - Dan Dascalescu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- meder omuraliev · Accepted Answer

简单的方法是将文本移动到单独的

中，像这样。基本上，您可以将透明度应用于单独的

并将文本放置在顶部...

<div id="parent">
   <div id="opacity"></div>
   <div id="child">text</div>
</div>

div#parent { position:relative; width:200px; height:200px; }
div#child { position:absolute; width:200px; height:200px; z-index:2; }
div#opacity { position:absolute; width:200px; height:200px; z-index:1; }

另一种方法是使用rgba。不要忘记还有一个单独的CSS属性可以供IE使用，因为它不支持rgba属性。您也可以使用透明PNG。

#regForm {
   background: rgb(200, 54, 54); /* fallback color */
   background: rgba(200, 54, 54, 0.5);
}

而对于IE浏览器...

<!--[if IE]>

   <style type="text/css">

   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 

    </style>

<![endif]-->

个人而言，我会选择第一种选项，因为它更加简单方便。