问:
是否可以仅使用 CSS 使元素的 background 半透明但元素的内容(文本和图像)不透明?
我想在不将文本和背景作为两个独立元素的情况下完成此操作。
尝试时:
{ 位置:绝对;背景颜色:绿色;过滤器:阿尔法(不透明度=60);不透明度:0.6; } 跨度 { 颜色:白色;过滤器:阿尔法(不透明度= 100);不透明度:1; } 你好世界
看起来子元素受其父元素的不透明度影响,因此 opacity:1 与父元素的 opacity:0.6 相关。
答1:
打造属于自己的副业,开启自由职业之旅,从huntsbot.com开始!
使用半透明 PNG 或 SVG 图像或使用 CSS:
background-color: rgba(255, 0, 0, 0.5);
这是一篇来自 css3.info 的文章,Opacity, RGBA and compromise (2007-06-03)。
请注意,一旦底层背景透出,文本仍然 needs sufficient contrast 带有背景。
你好,世界!
可以用十六进制颜色做到这一点吗?喜欢 #fff 吗?
@grm:W3C 考虑引入#RRGGBBAA 十六进制代码格式,但他们决定不(出于各种原因),所以我们不能。
@grm with SASS 你可以,background-color: rgba(#000, .5);
值得指出的是,如果您想使用透明度,every browser that supports RGBA also supports HSLA,这是一种更直观的颜色映射。 IE8 是唯一不支持它的伪显着浏览器,因此除非继续使用 HSL(A) 来处理每种颜色。
@outis:好消息,#RRGGBBAA is now in Color level 4。
答2:
一个优秀的自由职业者,应该有对需求敏感和精准需求捕获的能力,而huntsbot.com提供了这个机会
在 Firefox 3 和 Safari 3 中,您可以像 Georg Schölly mentioned 一样使用 RGBA。
一个鲜为人知的技巧是,您可以在 Internet Explorer 中使用它,也可以使用渐变过滤器。
background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
第一个十六进制数定义颜色的 alpha 值。
完整解决方案所有浏览器:
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
这是来自 CSS background transparency without affecting child elements, through RGBa and filters。
结果截图证明:
这是使用以下代码时:
An XHTML 1.0 Strict standard template
.transparent-background-with-text-and-images-on-top {
background: rgb(0, 0, 0) transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.6); /* RGBa with 0.6 opacity */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 5.5 - 7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /* For IE 8*/
}
Here some content (text AND images) "on top of the transparent background"
https://i.stack.imgur.com/BgkgK.png
这篇文章展示了如何在 IE8 中执行此操作:robertnyman.com/2010/01/11/…
@philfreo:如果您将 Sebastian 的代码的第一位更改为“背景:rgb(0, 0, 0) 透明;”它现在应该在 IE8 中工作。这困扰了我很长一段时间!
filter:progid 适用于 IE 9。颜色为:透明度、红色、绿色、蓝色 - 所有两位数的十六进制值。
background: rgb(0, 0, 0) transparent; 没有意义,因为 transparent 会覆盖备用颜色 (0,0,0),并使背景 100% 透明。我们的目标是半透明,因此根据您的设计,回退应该是纯色 (background: rgb(0, 0, 0);) 或完全透明 (background: transparent;)。
@AdrienBe - 我按照您的指示编辑了您的答案。不幸的是,我已经有一段时间没有参与这个特定的问答环节了,所以我现在无法加入这个对话。
答3:
打造属于自己的副业,开启自由职业之旅,从huntsbot.com开始!
这是我能想到的最好的解决方案,不使用 CSS 3。据我所知,它在 Firefox、Chrome 和 Internet Explorer 上运行良好。
将一个容器 div 和两个子 div 放在同一级别,一个用于内容,一个用于背景。并使用 CSS,自动调整背景大小以适应内容,并使用 z-index 将背景实际放在后面。
.container { 位置:相对; } .content { 位置:相对;白颜色; z指数:5; } .background { 位置:绝对;顶部:0px;左:0px;宽度:100%;高度:100%;背景颜色:黑色; z-index:1; /* 这三行是为了在所有浏览器中保持透明。 */ -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;过滤器:阿尔法(不透明度= 50);不透明度:0.5; } 这里是内容。 背景应该适合。
他说“没有将文本和背景分开放置在彼此上方的两个元素中。”。无论如何,谢谢,这是一个很好的解决方法并且很有用,但在某些情况下,您希望不透明元素成为半透明元素的子元素。
我在另一个 SO 问题上的回答几乎相同,但添加了一个 jsfiddle &截图样张(IE7+),感兴趣的看这里stackoverflow.com/a/21984546/759452
@Gorkem Pacaci:确保 opacity 属性是“真正”跨浏览器的,您可以使用 CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity 中的此代码片段
答4:
一个优秀的自由职业者,应该有对需求敏感和精准需求捕获的能力,而huntsbot.com提供了这个机会
对于简单的半透明背景颜色,上述解决方案(CSS3 或 bg 图像)是最佳选择。但是,如果你想做一些更花哨的事情(例如动画、多背景等),或者你不想依赖 CSS3,你可以尝试“窗格技术”:
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
}
.pane > .back {
position: absolute;
width: 100%; height: 100%;
top: auto; bottom: auto; left: auto; right: auto;
}
.pane > .cont {
position: relative;
z-index: 10;
}
Hello world
该技术通过在外部窗格元素内部使用两个“层”来工作:
一个(“背面”)适合窗格元素的大小而不影响内容的流动,
还有一个(“cont”)包含内容并帮助确定窗格的大小。
窗格上的 position: relative 很重要;它告诉后层适合窗格的大小。 (如果您需要
标记是绝对的,请将窗格从
更改为 并将所有内容包装在绝对位置
标记中。)
与上面列出的类似技术相比,该技术的主要优点是窗格不必是指定的大小。如上所述,它将适合全宽(正常块元素布局)并且仅与内容一样高。外部窗格元素可以任意调整大小,只要它是矩形的即可(即 inline-block 可以使用;plain-old inline 不行)。
此外,它还为您提供了很大的背景自由度;您可以自由地将任何东西放在后面的元素中,并且不会影响内容的流动(如果您想要多个全尺寸子层,只需确保它们也有位置:绝对,宽度/高度:100%,和上/下/左/右:自动)。
允许背景插入调整(通过上/下/左/右)和/或背景固定(通过删除左/右或上/下对之一)的一种变体是使用以下 CSS 代替:
.pane > .back {
position: absolute;
width: auto; height: auto;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}
正如所写,这适用于 Firefox、Safari、Chrome、IE8+ 和 Opera,尽管 IE7 和 IE6 需要额外的 CSS 和表达式、IIRC,上次我检查时,第二个 CSS 变体在 Opera 中不起作用。
需要注意的事项:
不会包含 cont 层内的浮动元素。您需要确保它们被清除或以其他方式包含,否则它们会从底部滑出。
边距在窗格元素上,填充在 cont 元素上。不要使用相反的内容(cont 上的边距或窗格上的 padding),否则您会发现页面总是比浏览器窗口稍宽的奇怪现象。
如前所述,整个事情需要是块或内联块。随意使用 s 而不是 s 来简化您的 CSS。
更完整的演示,通过与 display: inline-block 以及 auto 和具体的widths/min-heights:
.pane,.pane > .back,.pane > .cont { 显示:块; } .pane { 位置:相对;宽度:175px;最小高度:100px;边距:8px; } .pane > .back { 位置:绝对; z-index:1;宽度:自动;高度:自动;顶部:8px;底部:8px;左:8px;右:8px; } .pane > .cont { 位置:相对; z 指数:10; } .debug_red { 背景:rgba(255, 0, 0, 0.5);边框:1px 实心 rgba(255, 0, 0, 0.75); } .debug_green { 背景:rgba(0, 255, 0, 0.5);边框:1px 实心 rgba(0, 255, 0, 0.75); } .debug_blue { 背景:rgba(0, 0, 255, 0.5);边框:1px 实心 rgba(0, 0, 255, 0.75); } 窗格内容。 窗格内容。 窗格内容。 窗格内容。 窗格内容。 窗格内容。 窗格内容。 窗格内容。 窗格内容。 窗格内容。< br/> 窗格内容。 窗格内容。 窗格内容。 窗格内容。 窗格内容。
以下是广泛使用的技术的live demo:
https://i.stack.imgur.com/BoDSo.png
@Igor Ivancha 回滚您的更改。很抱歉,将缩进从我的首选形式(制表符)更改为您的(2 个空格)并不酷。您可能有充分的理由在日常代码项目中使用 2 空格缩进,但对于在 Web 上的演示,我相信制表符有明显的优势——更深的缩进更容易识别层次结构的级别,而且还差得很远更容易可靠地将制表符转换为空格,因此是所有阅读器的一种更兼容的形式。
@Igor Ivancha 此外,您似乎通过美化器运行代码,该美化器将每个 CSS 选择器和属性放在自己的行上。我的示例是用有意的换行符和间距编写的,以便在逻辑上将读者应该理解的部分组合在一起——例如,大多数 width: & height: 属性共享一条线,因为它们是相同类型的构造,并且可以更好地理解为二维形状,而不是一对一维约束。此外,有些台词包含相当数量的内容,因为重复的内容并不是那么重要的炫耀。
@Igor Ivancha 逻辑组织、分组和样式对于编写理智、可理解的代码非常重要,就像各种写作一样。您所做的更改相当于进入某人的帖子并删除所有分段符,并在每个句子后放置一个强制换行符。如果你想在自己的工作中成为那种迟钝的迂腐,很好,你可以自由地这样做。但是请不要把别人作品中的语义特征和表达方式变得愚蠢。
@Anshu 和其他所有人:请停止尝试编辑我的答案,将制表符更改为空格。如果您更喜欢空格,可以在您自己的代码中使用空格。我喜欢标签,它可以在网络上正确显示。请不要将您的偏好强加在我的代码和我的帖子上——当与上面的 HTML 和 CSS 一样的纯分层代码一起使用时,选项卡的合法缺点为零。停下来。
答5:
huntsbot.com洞察每一个产品背后的需求与收益,从而捕获灵感
有一个技巧可以最小化标记:使用伪元素作为背景,你可以设置它的不透明度而不影响主元素及其子元素:
DEMO
输出:
https://i.stack.imgur.com/8lK67.jpg
相关代码:
{ 位置:相对; } p:after { 内容:‘’;位置:绝对;顶部:0;左:0;宽度:100%;高度:100%;背景:#fff; -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;不透明度:0.6; z 指数:-1; } /*** 以下仅用于演示样式 ***/ body { background: url(‘http://i.imgur.com/k8BtMvj.jpg’) no-repeat;背景尺寸:封面; } p { 宽度:50%;填充:1em;保证金:10% 自动;字体系列:arial、serif;颜色:#000; } img { 显示:块;最大宽度:90%;边距:0.6em 自动; } Lorem ipsum dolor sit amet,consectetur adipiscing elit。 Sed a ligula ut nunc dignissim molestie。
浏览器支持为 Internet Explorer 8 及更高版本。
伪元素
不透明度
答6:
huntsbot.com高效搞钱,一站式跟进超10+任务平台外包需求
最好使用半透明的.png。
只需打开 Photoshop,创建一个 2x2 像素图像 (picking 1x1 can cause an Internet Explorer bug!),将其填充为绿色并将“图层选项卡”中的不透明度设置为 60%。然后保存并使其成为背景图像:
any text
当然,它很酷,除了可爱的 Internet Explorer 6。有更好的修复可用,但这里有一个快速破解:
p {
_filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}
答7:
huntsbot.com聚合了超过10+全球外包任务平台的外包需求,寻找外包任务与机会变的简单与高效。
此方法允许您在背景中拥有图像而不仅仅是纯色,并且可用于在其他属性(例如边框)上具有透明度。不需要透明的PNG图像。
在 CSS 中使用 :before(或 :after)并为其指定 opacity 值以使元素保持其原始不透明度。因此,您可以使用 :before 制作人造元素并为其提供所需的透明背景(或边框),并使用 z-index 将其移动到要保持不透明的内容后面。
一个示例 (fiddle)(请注意,类 dad 的 DIV 只是为了提供一些上下文和颜色对比,这个额外的元素实际上是不需要的,红色矩形向下移动了一点,使 fancyBg 元素后面的背景可见的权利):
Test text that should have solid text color lets see if we can manage it without extra elements
使用这个 CSS:
.dad {
background: lime; border: 1px double black; margin: 1ex 2ex;
padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
border: 1px dashed black; position: relative; color: white; font-weight: bold;
z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
position: absolute; background: red; opacity: .5;
top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
/*top: 0; right: 0; bottom: 0; left: 0;*/
z-index: -1;
}
在这种情况下,.fancyBg:before 具有您想要的透明 CSS 属性(在本例中为红色背景,但可以是图像或边框)。将其定位为绝对位置以将其移到 .fancyBg 后面(使用零值或更适合您需要的值)。
答8:
huntsbot.com洞察每一个产品背后的需求与收益,从而捕获灵感
最简单的方法是使用半透明背景 PNG 图像。
如果需要,您可以使用 JavaScript 使其在 Internet Explorer 6 中工作。
我使用 Transparent PNGs in Internet Explorer 6 中列出的方法。
除此之外,您可以使用两个并排的兄弟元素来伪造它 - 使一个半透明,然后将另一个绝对定位在顶部。
我只需要一个简单的背景颜色,您建议我用这种颜色创建哪种尺寸的 PNG? 1x1 会使渲染做很多工作,太多的像素会使这个 PNG 很大(压缩后的文件大小应该是可以的,但渲染仍然需要解压缩才能使用它)...
我建议使用 30px x 30px 之类的东西,它在重复渲染时比 1x1 使用更少的内存,并且仍然足够小以最大限度地减少带宽使用。
答9:
huntsbot.com洞察每一个产品背后的需求与收益,从而捕获灵感
几乎所有这些答案都假设设计师想要纯色背景。如果设计师真的想要一张照片作为背景,那么目前唯一真正的解决方案是 JavaScript,例如 jQuery Transify 插件 mentioned elsewhere。
我们需要做的是加入 CSS 工作组讨论,让他们给我们一个 background-opacity 属性!它应该与多背景功能齐头并进。
答10:
打造属于自己的副业,开启自由职业之旅,从huntsbot.com开始!
问题是,在您的示例中,文本实际上 具有 完全不透明度。它在 p 标记内完全不透明,但 p 标记只是半透明的。
您可以添加一个半透明的 PNG 背景图像而不是在 CSS 中实现它,或者将文本和 div 分成两个元素并将文本移动到框上(例如,负边距)。
否则就不可能了。
就像 Chris 提到的:如果您使用具有透明度的 PNG 文件,您必须使用 JavaScript 变通方法才能使其在讨厌的 Internet Explorer 中工作…
答11:
huntsbot.com – 高效赚钱,自由工作
这是我这样做的方法(它可能不是最佳的,但它有效):
创建您希望半透明的 div。给它一个类/ id。让它为空,然后关闭它。给它一个设定的高度和宽度(比如,300 像素 x 300 像素)。给它一个 0.5 或任何你喜欢的不透明度和背景颜色。
然后,在该 div 的正下方,创建另一个具有不同类/ID 的 div。在其中创建一个段落,您将在其中放置文本。给出 div 位置:相对,顶部:-295px(即 负 295 像素)。将其 z-index 设为 2 以获得良好的度量,并确保其不透明度为 1。根据需要设置段落的样式,但确保尺寸小于第一个 div 的尺寸,以免溢出。
而已。这是代码:
.trans { 不透明度:0.5;高度:300px;宽度:300px;背景颜色:橙色; } .trans2 { 不透明度:1;位置:相对;顶部:-295px; } .trans2 p { 宽度:295px;颜色:黑色;字体粗细:粗体; } text text text
这适用于 Safari 2.x,但我不了解 Internet Explorer。
可以避免额外的元素,而是使用像 :before 或 :after 这样的伪元素
huntsbot.com全球7大洲远程工作机会,探索不一样的工作方式