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

设置背景图像的不透明度而不影响子元素

发布于 2024-10-17 12:33:29 字数 1128 浏览 7 评论 0原文

是否可以设置背景图像的不透明度而不影响子元素的不透明度？

示例

页脚中的所有链接都需要自定义项目符号（背景图像），并且自定义项目符号的不透明度应为 50%。

HTML

<div id="footer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>

CSS

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
}

我尝试过的

我尝试将列表项的不透明度设置为 50%，但链接文本的不透明度也是 50% - 并且似乎没有办法重置子元素的不透明度：

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
    /* will also set the opacity of the link text */        
    opacity: 0.5;
}

我也尝试过使用 rgba，但这对背景图像没有任何影响：

#footer ul li {
    /* rgba doesn't apply to the background image */
    background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
}
原文

Is it possible to set the opacity of a background image without affecting the opacity of child elements?

Example

All links in the footer need a custom bullet (background image) and the opacity of the custom bullet should be 50%.

HTML

<div id="footer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>

CSS

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
}

What I've Tried

I tried setting the opacity of the list items to 50%, but then the opacity of the link text is also 50% - and there doesn't seem to be a way to reset the opacity of child elements:

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
    /* will also set the opacity of the link text */        
    opacity: 0.5;
}

I also tried using rgba, but that doesn't have any effect on the background image:

#footer ul li {
    /* rgba doesn't apply to the background image */
    background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
}

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

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

发布评论

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

评论（15）

抱着落日 2024-10-24 12:33:29

您可以将 CSS linear-gradient() 与 rgba() 结合使用。

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}
<div><span>Hello world.</span></div>

You can use CSS linear-gradient() with rgba().

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}
<div><span>Hello world.</span></div>

回复 原文
‘画卷フ 2024-10-24 12:33:29

将图像放入图像编辑器中，调低不透明度，将其另存为 .png 并使用它。

Take your image into an image editor, turn down the opacity, save it as a .png and use that instead.

回复 原文
忆悲凉 2024-10-24 12:33:29

这适用于每个浏览器

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-不影响子元素/

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.

Check demo at http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

回复 原文
紫罗兰の梦幻 2024-10-24 12:33:29

如果您使用图像作为项目符号，您可以考虑 :before 伪元素。

#footer ul li {
}

#footer ul li:before {
    content: url(/images/arrow.png);
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity:.50;
}

If you are using the image as a bullet, you might consider the :before pseudo element.

#footer ul li {
}

#footer ul li:before {
    content: url(/images/arrow.png);
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity:.50;
}
回复 原文
我的影子我的梦 2024-10-24 12:33:29

您可以将图像放在 div:after 或 div:before 中，并在

div:after {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
  opacity: 0.25;
}

此处找到的 “虚拟 div”设置不透明度
http://css-tricks.com/snippets/css/transparent-background-images/

You can put the image in the div:after or div:before and set the opacity on that "virtual div"

div:after {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
  opacity: 0.25;
}

found here
http://css-tricks.com/snippets/css/transparent-background-images/

回复 原文
岁月苍老的讽刺 2024-10-24 12:33:29
#footer ul li {
  position: relative;
  opacity: 0.99;
}

#footer ul li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(/images/arrow.png) no-repeat 0 50%;
  opacity: 0.5;
}

使用不透明度 0.99（小于 1）进行修改会创建 z-index 上下文，因此您不必担心全局 z-index 值。 （尝试删除它，看看在下一个演示中会发生什么，其中父包装器具有正 z 索引。）
如果你的元素已经有 z-index，那么你就不需要这个 hack。

此技术的演示。

#footer ul li {
  position: relative;
  opacity: 0.99;
}

#footer ul li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(/images/arrow.png) no-repeat 0 50%;
  opacity: 0.5;
}

Hack with opacity .99 (less than 1) creates z-index context so you can not worry about global z-index values. (Try to remove it and see what happens in the next demo where parent wrapper has positive z-index.)
If your element already has z-index, then you don't need this hack.

Demo of this technique.

回复 原文
暮倦 2024-10-24 12:33:29

另一种选择是 CSS Tricks 插入精确大小的伪元素的方法其后面的原始元素可以伪造我们正在寻找的不透明背景效果。有时您需要设置伪元素的高度。

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

Another option is CSS Tricks approach of inserting a pseudo element the exact size of the original element right behind it to fake the opaque background effect that we're looking for. Sometimes you will need to set a height for the pseudo element.

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}
回复 原文
一百个冬季 2024-10-24 12:33:29

不幸的是，在撰写此答案时，没有直接的方法可以做到这一点。您需要：

  1. 使用半透明图像作为背景（更容易）。
  2. 在您想要不透明的子项旁边添加一个额外的元素（如 div），为其添加背景，并在使其半透明后，将其放置在提到的子项后面。

Unfortunately, at the time of writing this answer, there is no direct way to do this. You need to:

  1. use a semi-transparent image for background (much easier).
  2. add an extra element (like div) next to children which you want the opaque, add background to it and after making it semi-transparent, position it behind mentioned children.
回复 原文
酒废 2024-10-24 12:33:29

“filter”属性需要一个整数来表示不透明度百分比，而不是双精度，以便适用于 IE7/8。

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

PS：我将此作为答案发布，因为 SO 需要至少 6 个更改的字符才能进行编辑。

The "filter" property, needs an integer for percentage of opacity instead of double, in order to work for IE7/8.

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

P.S.: I post this as an answer, since SO, needs at least 6 changed characters for an edit.

回复 原文
绮筵 2024-10-24 12:33:29

为了真正进行微调，我建议将适当的选择放在针对浏览器的包装器中。当我无法让 IE7 和 IE8“与其他浏览器很好地配合”时，这是唯一对我有用的东西（因为我目前在一家继续支持它们的软件公司工作）。

/* color or background image for all browsers, of course */            
#myBackground {
    background-color:#666; 
}
/* target chrome & safari without disrupting IE7-8 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #myBackground {
        -khtml-opacity:.50; 
        opacity:.50;
    }
}
/* target firefox without disrupting IE */
@-moz-document url-prefix() {
    #myBackground {
        -moz-opacity:.50;
        opacity:0.5;
    }
}
/* and IE last so it doesn't blow up */
#myBackground {
    opacity:.50;
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}

上面的代码可能有冗余——如果有人希望进一步清理它，请随意！

To really fine-tune things, I recommend placing the appropriate selections in browser-targeting wrappers. This was the only thing that worked for me when I could not get IE7 and IE8 to "play nicely with others" (as I am currently working for a software company who continues to support them).

/* color or background image for all browsers, of course */            
#myBackground {
    background-color:#666; 
}
/* target chrome & safari without disrupting IE7-8 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #myBackground {
        -khtml-opacity:.50; 
        opacity:.50;
    }
}
/* target firefox without disrupting IE */
@-moz-document url-prefix() {
    #myBackground {
        -moz-opacity:.50;
        opacity:0.5;
    }
}
/* and IE last so it doesn't blow up */
#myBackground {
    opacity:.50;
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}

I may have redundancies in the above code -- if anyone wishes to clean it up further, feel free!

回复 原文
孤独患者 2024-10-24 12:33:29

我们可以通过使用 rgba 颜色来解决不透明度问题，

例如 "background-color: rgba(0,0,0, 0.5)"

示例：

在此处输入图像描述

上一个 CSS：

 .login-card {
  // .... others CSS
  background-color: #121e1b;
  opacity: 0.5;
}

收件人：

 .login-card {
      // .... others CSS
      background-color: rgba(0, 0, 0, 0.5);
    }

we can figure out that by not playing with opacity just by using rgba color

e.g "background-color: rgba(0,0,0, 0.5)"

Sample :

enter image description here

Previous Css:

 .login-card {
  // .... others CSS
  background-color: #121e1b;
  opacity: 0.5;
}

To :

 .login-card {
      // .... others CSS
      background-color: rgba(0, 0, 0, 0.5);
    }
回复 原文
羁拥 2024-10-24 12:33:29

如果您必须仅设置项目符号的不透明度，为什么不直接将 Alpha 通道设置到图像中呢？顺便说一句，我认为没有办法通过 css 设置背景图像的不透明度而不改变整个元素（及其子元素）的不透明度。

If you have to set the opacity only to the bullet, why don't you set the alpha channel directly into the image? By the way I don't think there is a way to set the opacity to a background image via css without changing the opacity of the whole element (and its children too).

回复 原文
嗫嚅 2024-10-24 12:33:29

我找到了关于这个问题的一个非常好的和简单的教程。我认为它效果很好（虽然它支持 IE，但我只是告诉我的客户使用其他浏览器）：

CSS背景透明度而不影响子元素，通过RGBa和过滤器

从那里你可以添加渐变支持等。

I found a pretty good and simple tutorial about this issue. I think it works great (and though it supports IE, I just tell my clients to use other browsers):

CSS background transparency without affecting child elements, through RGBa and filters

From there you can add gradient support, etc.

回复 原文
花心好男孩 2024-10-24 12:33:29

只是为了添加到上面..您可以使用带有新颜色属性的 alpha 通道，例如。 rgba(0,0,0,0) 好的，所以这是黑色的，但不透明度为零，因此作为父级它不会影响子级。这仅适用于 Chrome、FF、Safari 和......我薄 O.

将你的十六进制颜色转换为 RGBA

Just to add to the above..you can use the alpha channel with the new color attributes eg. rgba(0,0,0,0) ok so this is black but with zero opacity so as a parent it will not affect the child. This only works on Chrome, FF, Safari and....I thin O.

convert your hex colours to RGBA

回复 原文
反话 2024-10-24 12:33:29
#footer ul li
     {
       position:relative;
       list-style:none;
     }
    #footer ul li:before
     {
       background-image: url(imagesFolder/bg_demo.png);
       background-repeat:no-repeat;
       content: "";
       top: 5px;
       left: -10px;
       bottom: 0;
       right: 0;
       position: absolute;
       z-index: -1;
       opacity: 0.5;
    }

你可以试试这个代码。我想这会奏效的。您可以访问演示

#footer ul li
     {
       position:relative;
       list-style:none;
     }
    #footer ul li:before
     {
       background-image: url(imagesFolder/bg_demo.png);
       background-repeat:no-repeat;
       content: "";
       top: 5px;
       left: -10px;
       bottom: 0;
       right: 0;
       position: absolute;
       z-index: -1;
       opacity: 0.5;
    }

You can try this code. I think it will be worked. You can visit the demo

回复 原文
~没有更多了~

关于作者

飘过的浮云

暂无简介

文章
评论
540 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

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