CSS不透明度只对背景颜色,对文字不透明吗?

发布于 2024-10-19 05:40:38 字数 192 浏览 2 评论 0原文

我可以将 opacity 属性仅分配给 divbackground 属性,而不分配给其上的文本吗?

我已经尝试过:

background: #CCC;
opacity: 0.6;

但这不会改变不透明度。

Can I assign the opacity property to the background property of a div only and not to the text on it?

I've tried:

background: #CCC;
opacity: 0.6;

but this doesn't change the opacity.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(11

白云不回头 2024-10-26 05:40:38

听起来您想使用透明背景,在这种情况下您可以尝试使用 rgba() 函数:

rgba(R、G、B、A)

R(红色)、G(绿色)和 B(蓝色)可以是 ,其中数字255 对应于 100%。 (alpha) 可以是 0 到 1 之间的,或者是 ,其中数字 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) /* 全不透明绿色 */ 

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

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

It sounds like you want to use a transparent background, in which case you could try using the rgba() function:

rgba(R, G, B, A)

R (red), G (green), and B (blue) can be either <integer>s or <percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).

RGBa example

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

A small example showing how rgba can be used.

As of 2018, practically every browser supports the rgba syntax.

贵在坚持 2024-10-26 05:40:38

最简单的方法是使用 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>

The easiest way to do this is with 2 divs, 1 with the background and 1 with the text:

#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>

一指流沙 2024-10-26 05:40:38

仅限 Les 用户:

如果您不喜欢使用 RGBA 设置颜色,而是喜欢使用使用十六进制,有解决方案。

你可以使用这样的 mixin:

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

并使用它

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

: 还提供:

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

请参阅如何使用 Less 编译器将十六进制颜色转换为 rgba?

For Less users only:

If you don't like to set your colors using RGBA, but rather using HEX, there are solutions.

You could use a mixin like:

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

And use it like:

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

Actually this is what a built-in Less function also provide:

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

See How do I convert a hexadecimal color to rgba with the Less compiler?

绝影如岚 2024-10-26 05:40:38

我也有同样的问题。我想要 100% 透明的背景色。只需使用此代码即可;这对我来说非常有用:

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

您可以在此网页的左侧(联系表单区域)。

I had the same problem. I want a 100% transparent background color. Just use this code; it's worked great for me:

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

You can see examples on the left side on this web page (the contact form area).

嘿嘿嘿 2024-10-26 05:40:38

我的技巧是创建一个带有颜色的透明 .png 并使用 background:url()

My trick is to create a transparent .png with the color and use background:url().

无可置疑 2024-10-26 05:40:38

这适用于每个浏览器

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;
}

如果您不希望透明度影响整个容器及其子容器,请检查此解决方法。为了实现这一点,你必须有一个绝对定位的孩子和一个相对定位的父母。 不影响子元素的 CSS 不透明度< /a>

不影响“儿童”的 CSS 不透明度

This will work with every browser

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;
}

If you don't want transparency to affect the entire container and its children, check this workaround. You must have an absolutely positioned child with a relatively positioned parent to achieve this. CSS Opacity That Doesn’t Affect Child Elements

Check a working demo at CSS Opacity That Doesn't Affect "Children"

娇纵 2024-10-26 05:40:38

对于遇到此线程的任何人,这里有一个我刚刚编写的名为 thatsNotYoChild.js 的脚本,它可以自动解决此问题:

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

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

For anyone coming across this thread, here's a script called thatsNotYoChild.js that I just wrote that solves this problem automatically:

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

Basically, it separates children from the parent element, but keeps the element in the same physical location on the page.

小鸟爱天空丶 2024-10-26 05:40:38

做到这一点的一个好方法就是使用 CSS 3。

在页面顶部创建一个 div 宽度类 - 例如 supersizer:

然后设置以下 CSS 属性:

  .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>

A great way to do this would be to use CSS 3 indeed.

Create a div width a class - e.g. supersizer on top of your page:

Then set following 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>

南冥有猫 2024-10-26 05:40:38

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

The easiest solution is to create 3 divs. One that will contain the other 2, the one with transparent background and the one with content. Make the first div's position relative and set the one with transparent background to negative z-index, then adjust the position of the content to fit over the transparent background. This way you won't have issues with absolute positioning.

深陷 2024-10-26 05:40:38

使用:

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

此方法适用于所有浏览器。

Use:

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

This method will work in all browsers.

中性美 2024-10-26 05:40:38

你不能。你必须有一个单独的 div 就是那个背景,这样你就只能对其应用不透明度。

我最近尝试这样做,因为我已经在使用 jQuery,所以我发现以下是最不麻烦的:

  1. 创建两个不同的 div。他们将是兄弟姐妹,不会互相包容或任何其他东西。
  2. text div 设置纯色背景色,因为这将是无 JavaScript 的默认设置。
  3. 使用 jQuery 获取 text div 的高度,并将其应用到 background div。

我确信有某种 CSS 忍者方法可以只用浮动或其他东西来完成所有这些,但我没有耐心弄清楚。

You can't. You have to have a separate div that is just that background, so that you can only apply the opacity to that.

I tried doing this recently, and since I was already using jQuery, I found the following to be the least hassle:

  1. Create the two different divs. They'll be siblings, not contained in each other or anything.
  2. Give the text div a solid background color, because that will be the JavaScript-less default.
  3. Use jQuery to get the text div's height, and apply it to the background div.

I'm sure there's some kind of CSS ninja way to do all this with only floats or something, but I didn't have the patience to figure it out.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文