首页 文章

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

提问于
浏览 次
713

这个问题在这里已有答案：

我可以将 opacity 属性仅分配给 div 的 background 属性而不分配给它上面的文本吗？

我试过了：

background: #CCC;
opacity: 0.6;

但这不会改变不透明度 .

css opacity

11 回答

  • 1263

    我有同样的问题 . 我想要100％透明的背景色，只需使用这个代码，它对我来说很有用：

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

    您可以在left side on this web page（联系表单区域）上查看示例

    回复于
  • 12

    这适用于每个浏览器

    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的工作演示

    回复于
  • 7

    你不能 . 你必须有一个单独的div只是那个背景，所以你只能应用不透明度 .

    我最近尝试这样做，因为我已经使用了jQuery，我发现以下是最麻烦的：

    • 创建两个不同的div . 他们将是兄弟姐妹，彼此之间没有任何东西 .

    • 为 text div提供纯色背景色，因为这将是无JS的默认值 .

    • 使用jQuery获取 text div的高度，并将其应用于 background div .

    我确定有一种CSS忍者方式可以用浮动或其他东西来做所有这些，但我没有耐心去弄明白 .

    回复于
  • -3

    听起来你想要使用透明背景，在这种情况下你可以尝试使用rgba()函数：

    rgba（R，G，B，A）R（红色），G（绿色）和B（蓝色）可以是<整数> s或<百分比> s，其中数字255对应于100％ . A（α）可以是0到1之间的<number>，或<percentage>，其中数字1对应于100％（完全不透明度） . RGBa示例rgba（51,170,51，.1）/ * 10％不透明绿色* /
    rgba（51,170,51，.4）/ * 40％不透明绿色* /
    rgba（51,170,51，.7）/ * 70％不透明绿色* /
    rgba（51,170,51,1）/ 全不透明绿 /

    一个小example显示如何使用 rgba .

    截至2018年，几乎every browser supports the rgba syntax .

    回复于
  • -18

    For LESS users only:

    如果您不喜欢使用RGBA设置颜色，而是使用HEX，则有解决方案 .

    你可以使用mixin：

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

    并使用它

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

    实际上这也是built-in LESS function也提供的：

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

    见How to convert HEX color to rgba with Less compiler?

    回复于
  • 1

    一个很好的方法是使用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>
    回复于
  • 19

    最简单的解决方案是创建3 divs . 一个将包含其他2，一个具有透明背景和一个具有内容 . 使第一个div的位置相对并将具有透明背景的位置设置为负 z-index ，然后调整内容的位置以适合透明背景 . 这样您就不会遇到绝对定位问题 .

    回复于
  • 17

    最简单的方法是使用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>
    回复于
  • 2

    对于遇到这个帖子的人来说，这里有一个名为thatsNotYoChild.js的脚本，我刚才写的是自动解决这个问题：

    http://www.impressivewebs.com/fixing-parent-child-opacity/

    基本上，它将子元素与父元素分开，但将元素保留在页面上的相同物理位置 .

    回复于
  • 70

    使用

    background:url("location of image");//use an image with opacity

    此方法适用于所有浏览器

    回复于
  • 4

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

    回复于

相关问题