背景颜色的不透明度，但不是文本[重复]

本文翻译自：Opacity of background-color, but not the text [duplicate]

This question already has an answer here: 这个问题在这里已有答案：

How do I give text or an image a transparent background using CSS? 如何使用CSS为文本或图像提供透明背景？ 28 answers 28个答案

How do I make the cross-browser (including Internet Explorer 6) transparency for the background of a div while the text remains opaque? 如何在文本保持不透明的情况下为div的背景制作跨浏览器（包括Internet Explorer 6）透明度？

I need to do it without using any library such as jQuery, etc. (But if you know of a library that does it I'd love to know so I can look at their code). 我需要在不使用任何库（如jQuery等）的情况下完成它。（但是如果你知道一个库那样做我很想知道，所以我可以查看他们的代码）。

#1楼

参考：https://stackoom.com/question/2fx3/背景颜色的不透明度-但不是文本-重复

#2楼

Relaxing your requirement to work on IE6 and legacy browsers you can use ::before and display: inline-block 放宽您对IE6和旧版浏览器的工作要求，您可以使用:: before和display：inline-block

div
{display: inline-block;position: relative;
}
div::before
{content: "";display: block;position: absolute;z-index: -1;width: 100%;height: 100%;background:red;opacity: .2;
}

Demo at http://jsfiddle.net/KVyFH/172/ 演示http://jsfiddle.net/KVyFH/172/

It will work on any modern browser 它适用于任何现代浏览器

#3楼

Thanks @davy-landmann for https://stackoverflow.com/a/638064/417153 . 感谢@ davy-landmann for https://stackoverflow.com/a/638064/417153 。 That's what I was looking for! 这就是我在寻找的东西！ Same effect with LESS code: 与LESS代码相同的效果：

  @searchResultMinHeight = 200px;.searchResult {min-height: @searchResultMinHeight;position: relative;.innerTrans {background: white;.opacity(0.5);min-height: @searchResultMinHeight;}.innerBody {padding: 0.5em;position: absolute;top: 0;}}

#4楼

Use rgba! 使用rgba！

.alpha60 {/* Fallback for web browsers that don't support RGBa */background-color: rgb(0, 0, 0);/* RGBa with 0.6 opacity */background-color: 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)";
}

In addition to this, you have to declare background: transparent for IE web browsers, preferably served via conditional comments or similar! 除此之外，您必须为IE Web浏览器声明background: transparent ，最好通过条件注释或类似方式提供！

via http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/ 通过http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

#5楼

I use an alpha-transparent PNG for that: 我使用alpha透明的PNG：

div.semi-transparent {background: url('semi-transparent.png');
}

For IE6, you'd need to use a PNG fix ( 1 , 2 ), though. 对于IE6，你需要用一个PNG修复（ 1 ， 2 ），虽然。

#6楼

I've created that effect on my blog Landman Code . 我在我的博客Landman Code上创建了这个效果。

What I did was 我做的是

 #Header { position: relative; } #Header H1 { font-size: 3em; color: #00FF00; margin:0; padding:0; } #Header H2 { font-size: 1.5em; color: #FFFF00; margin:0; padding:0; } #Header .Background { background: #557700; filter: alpha(opacity=30); filter: progid: DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.3; zoom: 1; } #Header .Background * { visibility: hidden; // hide the faded text } #Header .Foreground { position: absolute; // position on top of the background div left: 0; top: 0; }

 <div id="Header"> <div class="Background"> <h1>Title</h1> <h2>Subtitle</h2> </div> <div class="Foreground"> <h1>Title</h1> <h2>Subtitle</h2> </div> </div>

The important thing that every padding/margin and content must be the same in both the .Background as .Foreground. 重要的是每个填充/边距和内容在.Background和.Foreground中都必须相同。

背景颜色的不透明度，但不是文本[重复]相关推荐

html超链接点击状态改变背景颜色,div css鼠标悬停锚文本超链接文字背景颜色或图片变化...
css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色). 鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇. 此DIV CSS ...
python不带颜色的图形_如何使用Matplotlib设置图形背景颜色的不透明度 - python
我一直在玩Matplotlib,无法弄清楚如何更改图形的背景颜色,或者如何使背景完全透明. 参考方案如果只希望图形和轴的整个背景都是透明的,则在使用transparent=True保存图形时,只需指 ...
Java——文本框设置背景颜色、字体样式和颜色
┏(ω)=☞ 本专栏的目录(为您提供更好的查询方式)(点这里说不定有你想要的) 字体风格一共有四种,分别是 Font.PLAIN(普通) Font.BOLD(加粗) Font.ITALIC(斜体) F ...
如何利用python的opencv，在图片上添加一个有背景颜色的文本框，并在文本框内添加文字？
可以使用OpenCV的cv2.putText()函数来实现. 示例代码: import cv2 读取图片 img = cv2.imread('image.jpg') 定义文本框的位置 x, y = 1 ...
Bootstrap入门——情景文本颜色及背景颜色
Bootstrap入门打卡1天:学习网址https://v3.bootcss.com/ [全局CSS样式]-[辅助类]关于情景文本颜色和背景颜色的设置其中,情景文本颜色可以分为六种 -- 1.文本颜 ...
ExtJS4.1.1 设置表格背景颜色修改文本颜色在表格中插入图片
由于ExtJS版本不断更新,各种渲染方式也随之有所改变,目前大部分书籍还是停留在3版本,对于ExtJS4.1.1版本的表格渲染,设置表格行背景颜色的方式如下: 首先,定义行的样式: 1 .yellow ...
BootStrap笔记-文本颜色链接颜色背景颜色
代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
Windows API 关于控件的自绘——文本颜色、背景颜色、字体
首先要将控件设置为可以自画,例如:要自画一个按钮,在窗口的WM_CREATE中创建类名为"BUTTON"的子窗口,风格必须包含BS_OWNERDRAW.然后在父窗口的WM_DRAW ...
BootStrap4 文本颜色和背景颜色
专门腾一篇颜色效果图出来了文本颜色背景颜色文本颜色 <p class="text-muted">柔和的 ...

背景颜色的不透明度，但不是文本[重复]

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

背景颜色的不透明度，但不是文本[重复]相关推荐

最新文章

热门文章