CSS不透明度只对背景颜色而不是文字就可以了吗？

Question

我可以将opacity属性分配给仅background属性div而不是文本吗？

我试过了:

background: #CCC;
opacity: 0.6;

但这不会改变不透明度.

Answer 1

听起来你想要使用透明背景,在这种情况下你可以尝试使用这个rgba()功能:

rgba(R, G, B, A)

R(红色),G(绿色)和B(蓝色)可以是<integer>s或<percentage>s,其中数字255对应于100%.A(α)可以是<number>介于0和1之间,或a <percentage>,其中数字1对应于100%(完全不透明度).

RGBa的例子

rgba(51, 170, 51, .1)    /*  10% opaque green */ 
rgba(51, 170, 51, .4)    /*  40% opaque green */ 
rgba(51, 170, 51, .7)    /*  70% opaque green */ 
rgba(51, 170, 51,  1)    /* full opaque green */ 

一个小例子,展示了如何rgba使用.

截至2018年,几乎每个浏览器都支持rgba语法.

Answer 2

最简单的方法是使用2个div,1个带背景,1个带文本:

#container {
  position: relative;
  width: 300px;
  height: 200px;
}
#block {
  background: #CCC;
  filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div id="container">
  <div id="block"></div>
  <div id="text">Test</div>
</div>

Answer 3

仅限LESS用户:

如果你不喜欢使用RGBA设置颜色,而是使用HEX,那么就有解决方案.

你可以使用mixin:

.transparentBackgroundColorMixin(@alpha,@color) {
  background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}

并使用它

.myClass {
    .transparentBackgroundColorMixin(0.6,#FFFFFF);
}

实际上这就是内置的LESS功能还提供了:

.myClass {
    background-color: fade(#FFFFFF, 50%);
}

请参阅如何使用Less编译器将HEX颜色转换为rgba？

Answer 4

这适用于每个浏览器

div {
    -khtml-opacity: .50;
    -moz-opacity: .50;
    -ms-filter: ”alpha(opacity=50)”;
    filter: alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity: .50;
}

如果您不希望透明度影响整个容器及其子容器,请检查此解决方法.您必须拥有一个绝对定位的孩子,并且父母位置相对较低才能达到此目的 http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

查看http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html上的工作演示

Answer 5

我的诀窍是用颜色和用法创建一个透明的.png background:url().

Answer 6

我有同样的问题.我想要100%透明的背景色,只需使用这段代码,它对我来说很有用:

rgba(54, 25, 25, .00004);

您可以在此网页的左侧看到示例(联系表单区域)

Answer 7

一个很好的方法是使用css3.

创建一个div宽度类 - 例如页面顶部的超级化器:

然后设置以下css-properties:

  .supersizer {
    background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    opacity: 0.5;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    top: 0;
  }

<div class="supersizer"></div>