当前位置：文江博客话题详情

如何设置容器 div 的不透明度而不是子文本的不透明度？

发布于 2024-12-20 13:12:57 字数 206 浏览 0 评论 0原文

我有一个带有 CSS 样式规则 opacity: 0.4; 的 DIV。

div 内部有一个 a 标签，文本也具有不透明度。

我如何声明文本：opacity :1 或任何好主意...... 您可以在以下链接中看到它：http://yagen.org/

画廊在页面的上方。

原文

分享到QQ

分享到微博

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

发布评论

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

只是我以为 2024-12-27 13:12:57

continue

If you set the opacity of an element, the opacity is set for all of its children as well. If you want opaque text on a transparent background, take a look at RGBa.

The result would look something like this:

.mycontainer {
    background: rgb(60, 60, 60);
    background: rgba(60, 60, 60, 0.4);
}

.mycontainer a {
    color: #fff;
}

The first background declaration serves as a fallback in case a browser doesn't support RGBa color - it will simply be a solid color instead.

Here's a great reference for RGBa color: https://css-tricks.com/rgba-browser-support/

回复收藏 0 原文

娇纵 2024-12-27 13:12:57

如果你有这种类型的 HTML：

<div id="container">
    <p>
        Darn fanatically far and tarantula jeepers meek a secret much so hence underneath monogamously interwove apart gosh spilled far where and badger.
    </p>
    <a href="#">This is a link</a>
</div>

即使你的 CSS 是这样的。

#container {
    background: #000;
    color: #fff;
    opacity: 0.4;
}

#container a {
    color: #ff0450;
    opacity: 1;
}

它不会使链接具有比容器更大的不透明度，因为不透明度是从父级继承的。

唯一的方法是使用 rgba 值，但它不起作用在IE中。

正确的方法是这样的 -

#container {
    background: rgba(0,0,0,0.4);
    color: #fff;
}

看看这个fiddle

If you have your HTML of this sort:

<div id="container">
    <p>
        Darn fanatically far and tarantula jeepers meek a secret much so hence underneath monogamously interwove apart gosh spilled far where and badger.
    </p>
    <a href="#">This is a link</a>
</div>

Even if your CSS is this.

#container {
    background: #000;
    color: #fff;
    opacity: 0.4;
}

#container a {
    color: #ff0450;
    opacity: 1;
}

It will not make the link have a greater opacity than the container because opacity is inherited from the parent.

The only way to do it is using rgba values but it will not work in IE.

The correct way to do it is this -

#container {
    background: rgba(0,0,0,0.4);
    color: #fff;
}

Take a look at this fiddle

回复收藏 0 原文

瞎闹 2024-12-27 13:12:57

您好，这是简单的示例

html

  <section class="op5">
    <div class="op1">

    </div>
  </section>

css

 .op5{
        width:100px;
        height:100px;
        text-align:center;
        background-color:rgba(0,0,0,0.5);
        position:relative;
    }
    .op1{
        width:50px;
        height:50px;
        margin:0 auto;
        opacity:1;
        background-color:red;
    }

注意：- 在父元素中我们使用了 rgba 格式，在子元素中我们使用了 opacity 属性

Hi Here is the simple example

html

  <section class="op5">
    <div class="op1">

    </div>
  </section>

css

 .op5{
        width:100px;
        height:100px;
        text-align:center;
        background-color:rgba(0,0,0,0.5);
        position:relative;
    }
    .op1{
        width:50px;
        height:50px;
        margin:0 auto;
        opacity:1;
        background-color:red;
    }

Note:- In the parent we have used rgba format and in the children element we have used opacity property

回复收藏 0 原文

山人契 2024-12-27 13:12:57

最简单的是使用rgba
如果我们有一个 id="parent" 的 div，我们可以这样做

#parent{
    background-color: rgba(255, 0, 255, 0); /*1 for completely opaque, 0 for completely transparent*/ 
}

The easiest is to use rgba
If we have a div with id="parent", we can do this

#parent{
    background-color: rgba(255, 0, 255, 0); /*1 for completely opaque, 0 for completely transparent*/ 
}

回复收藏 0 原文

~没有更多了~

关于作者

披肩女神

暂无简介

文章

25 人气

关注发私信

友情链接

文江博客

如何设置容器 div 的不透明度而不是子文本的不透明度？

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

发布评论

评论（4）

html

css

html

css

关于作者

相关话题

热门标签

推荐作者

梦途

唐睦州

且行且努力

Yiu Peng

albertliao

逆夏时光

友情链接

如何设置容器 div 的不透明度而不是子文本的不透明度？

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

发布评论

评论（4）

html

css

html

css

关于作者

相关话题

热门标签

推荐作者

梦途

唐睦州

且行且努力

Yiu Peng

albertliao

逆夏时光

友情链接

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