如何使用CSS为文本或图像提供透明背景？
Sti*_*ers 2211 html css opacity
是否可以,仅使用CSS,使background元素半透明但元素的内容(文本和图像)不透明？
我想在不将文本和背景作为两个单独元素的情况下实现此目的.
尝试时:
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}<p>
<span>Hello world</span>
</p>看起来子元素受父母的不透明度影响,因此opacity:1相对于opacity:0.6父元素而言.
Geo*_*lly 2240
使用半透明的PNG图像或使用CSS3:
background-color: rgba(255, 0, 0, 0.5);
这是来自css3.info,Opacity,RGBA和妥协的文章(2007-06-03).
- @grm与[SASS](http://sass-lang.com/)你可以,`background-color:rgba(#000,.5);` (92认同)
- 是否可以用十六进制颜色做到这一点？喜欢#fff？ (86认同)
- @grm:W3C考虑引入#RRGGBBAA十六进制代码格式,但他们决定不(因各种原因),所以我们不能. (35认同)
- @outis:好消息,[#RRGGBBAA现在处于Color level 4](http://dev.w3.org/csswg/css-color/#hex-notation). (17认同)
- 值得指出的是,如果你想使用透明度,[每个支持RGBA的浏览器也支持HSLA](http://caniuse.com/css3-colors),这是一个更直观的颜色映射.IE8是唯一不能支持它的伪显着浏览器,所以除非继续使用HSL(A)用于每种颜色. (2认同)
Seb*_*åge 470
在Firefox 3和Safari 3中,您可以像GeorgSchölly提到的那样使用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背景透明度而不影响子元素,通过RGBa和过滤器.
截图结果证明:
这是在使用以下代码时:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css" media="all">
.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*/
}
</style>
</head>
<body>
<div class="transparent-background-with-text-and-images-on-top">
<p>Here some content (text AND images) "on top of the transparent background"</p>
<img src="http://i.imgur.com/LnnghmF.gif">
</div>
</body>
</html>
- @philfreo:如果你将Sebastian代码的第一位改为"background:rgb(0,0,0)transparent;" 它现在应该在IE8中工作.这让我困扰了一段时间! (14认同)
- 这篇文章展示了如何在IE8中做到这一点:http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/ (5认同)
Gor*_*aci 105
这是我能想到的最好的解决方案,而不是使用CSS 3.就我所见,它在Firefox,Chrome和Internet Explorer上运行良好.
将容器DIV和两个子DIV放在同一级别,一个用于内容,一个用于背景.使用CSS,自动调整背景大小以适应内容,并使用z-index将背景实际放在后面.
.container {
position: relative;
}
.content {
position: relative;
color: White;
z-index: 5;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: Black;
z-index: 1;
/* These three lines are for transparency in all browsers. */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}<div class="container">
<div class="content">
Here is the content.
<br/>Background should grow to fit.
</div>
<div class="background"></div>
</div>- 他说:"不将两个元素中的文本和背景分开." 无论如何,谢谢,这是一个很好的修复,并且很有用,但在某些情况下,您希望不透明元素是半透明元素的子元素. (19认同)
Sli*_*son 62
对于简单的半透明背景颜色,上述解决方案(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;
}
<p class="pane">
<span class="back" style="background-color: green; opacity: 0.6;"></span>
<span class="cont" style="color: white;">Hello world</span>
</p>
该技术通过在外部窗格元素内使用两个"图层"来工作:
- 一个("后面")适合窗格元素的大小而不影响内容的流动,
- 和一个("cont")包含内容,并帮助确定窗格的大小.
在position: relative上面板是很重要的; 它告诉后面层适合窗格的大小.(如果您需要将<p>标记设置为绝对标记,请将窗格从a更改<p>为a <span>并将所有内容包装在绝对位置<p>标记中.)
该技术相对于上面列出的类似技术的主要优点是窗格不必是指定的大小; 如上所述,它将适合全宽(正常的块元素布局)并且仅与内容一样高.外部窗格元素的大小可以任意方式,只要它是矩形的(即内联块可以工作;普通的内联不会).
此外,它为您提供了很多自由背景; 你可以自由地在后面的元素中添加任何东西,并且它不会影响内容的流动(如果你想要多个全尺寸的子图层,只要确保它们也有位置:绝对,宽度/高度: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上的边距),否则你会发现奇怪的事情,例如页面总是略宽于浏览器窗口.
- 如上所述,整个事情需要是块或内联块.随意使用
<div>s代替<span>s来简化你的CSS.
一个更全面的演示,通过display: inline-block与两者auto和特定widths/min-heights 一起使用它来展示这种技术的灵活性:
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
width: 175px; min-height: 100px;
margin: 8px;
}
.pane > .back {
position: absolute; z-index: 1;
width: auto; height: auto;
top: 8px; bottom: 8px; left: 8px; right: 8px;
}
.pane > .cont {
position: relative; z-index: 10;
}
.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>这是一个广泛使用的技术的现场演示:
- @Igor Ivancha回滚你的变化.对不起,将缩进从我喜欢的表格(标签)更改为你的(2个空格)并不酷.您可能有充分的理由在日常代码项目中使用2空格缩进,但是为了在Web上进行演示,我相信制表符有明确的胜利 - 更深的缩进使得更容易识别层次结构的级别,并且它很远更容易可靠地将标签转换为空格,因此是所有读者的更兼容的形式. (2认同)
小智 56
最好使用半透明的.png.
只需打开Photoshop,创建一个2x2像素图像(拾取1x1可能会导致Internet Explorer错误!),用绿色填充它并将"图层选项卡"中的不透明度设置为60%.然后保存并使其成为背景图像:
<p style="background: url(green.png);">any text</p>
当然,它很酷,除了可爱的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');
}
web*_*iki 53
有一个最小化标记的技巧:使用伪元素作为背景,您可以设置不透明度而不影响主元素及其子元素:
输出:
相关代码:
p {
position: relative;
}
p:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: .6;
z-index: -1;
}
/*** The following is just for demo styles ***/
body {
background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
background-size: cover;
}
p {
width: 50%;
padding: 1em;
margin: 10% auto;
font-family: arial, serif;
color: #000;
}
img {
display: block;
max-width: 90%;
margin: .6em auto;
}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
<img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>浏览器支持是Internet Explorer 8及更高版本.
Chr*_*ris 23
最简单的方法是使用半透明背景PNG图像.
__CODE__如果需要,您可以使用JavaScript使其工作.
我使用Internet Explorer 6中透明PNG中概述的方法.
除此之外,
你可以伪造它__CODE__- 制作一个半透明的,然后__CODE__呢？
- 我推荐像30px x 30px这样的东西,它在渲染重复时比1x1使用更少的内存,并且仍然足够小以最小化带宽使用. (3认同)
- 我需要的只是一个简单的背景颜色,你建议我用这种颜色创建PNG大小？1x1将使渲染做很多工作,太多的像素使得这个PNG非常大(应该是压缩后的文件大小,但仍然渲染需要解压缩才能使用它)... (2认同)
fro*_*koi 21
此方法允许您在背景中拥有图像,而不仅仅是纯色,并且可以用于在其他属性(如边框)上具有透明度.不需要透明的PNG图像.
在CSS中使用:before(或:after)并为它们提供不透明度值以使元素保持其原始不透明度.因此,您可以使用:before之前制作一个虚假元素并为其提供所需的透明背景(或边框),并将其移动到您想要保持不透明的内容后面z-index.
一个例子(小提琴)(请注意,DIVwith class dad只是提供一些上下文和颜色的对比,实际上不需要这个额外的元素,并且红色矩形向下移动一点向右移动以留下可见的背景的fancyBg元素):
<div class="dad">
<div class="fancyBg">
Test text that should have solid text color lets see if we can manage it without extra elements
</div>
</div>
用这个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(使用零值或任何更适合您需要的值).
Sve*_*nke 17
问题是,文本实际上在您的示例中完全不透明.它在p标签内部具有完全不透明度,但p标签只是半透明的.
你可以添加一个半透明的PNG背景图像,而不是在CSS中实现它,或者将文本和div分成2个元素并在框上移动文本(例如,负边距).
否则就不可能.
编辑:
就像Chris提到的那样:如果您使用具有透明度的PNG文件,则必须使用JavaScript解决方法使其在讨厌的Internet Explorer中工作...
小智 13
这是我如何做到这一点(它可能不是最佳的,但它的工作原理):
创建div您想要半透明的.给它一个类/ id.保持EMPTY,然后关闭它.给它一个设定的高度和宽度(比如300像素乘300像素).给它一个0.5的不透明度或任何你喜欢的颜色和背景颜色.
然后,直接在该div下面,创建另一个具有不同类/ id的div.在其中创建一个段落,您可以在其中放置文本.给出div位置:relative和top :( -295px这是NEGATIVE 295像素).给它一个z-index为2以获得良好的度量,并确保其不透明度为1.根据您的喜好设置您的段落样式,但要确保尺寸小于第一个尺寸,div以便它不会溢出.
而已.这是代码:
.trans {
opacity: 0.5;
height: 300px;
width: 300px;
background-color: orange;
}
.trans2 {
opacity: 1;
position: relative;
top: -295px;
}
.trans2 p {
width: 295px;
color: black;
font-weight: bold;
}<body>
<div class="trans">
</div>
<div class="trans2">
<p>
text text text
</p>
</div>
</body>这适用于Safari 2.x,我不了解Internet Explorer.
jor*_*ren 12
这是一个jQuery插件,它将为您处理一切,Transify(Transify - 一个jQuery插件,可以轻松地将透明度/不透明度应用于元素的背景).
我时不时地遇到这个问题,所以我决定写一些能让生活更轻松的东西.该脚本不到2 KB,它只需要1行代码就可以使它工作,如果你愿意,它还可以处理动画背景的不透明度.
phi*_*ash 10
前段时间,我在使用CSS的跨浏览器背景透明度中写到了这一点.
奇怪的Internet Explorer 6将允许您使背景透明,并使文本在顶部完全不透明.对于其他浏览器,我建议使用透明的PNG文件.
如果你是一个Photoshop人,你也可以使用:
#some-element {
background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
}
要么:
#some-element {
background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}
为了使元素的背景半透明但是元素的内容(文本和图像)不透明.您需要为该图像编写css代码,并且必须添加一个名为opacity且具有最小值的属性.例如
.image {
position: relative;
background-color: cyan;
opacity: 0.7;
}
//值越小透明度越高,值越小透明度越低.
背景色:RGBA(255,0,0,0.5); 如上所述是最简单的答案.要说使用CSS3,即使在2013年,也不简单,因为各种浏览器的支持程度随着每次迭代而变化.
虽然background-color得到所有主流浏览器的支持(不是CSS3的新手)[1]但是alpha透明度可能很棘手,特别是对于版本9之前的Internet Explorer以及版本5.1之前的Safari上的边框颜色.[2]
使用Compass或SASS之类的东西可以真正帮助生产和跨平台兼容.
[1] W3Schools:CSS background-color属性
[2] Norman博客:浏览器支持清单CSS3(2012年10月)
CSS3可以轻松解决您的问题.使用:
background-color:rgba(0, 255, 0, 0.5);
这里,rgba代表红色,绿色,蓝色和alpha值.由于255获得绿色值,并且通过0.5α值获得半透明度.
对于Internet Explorer 8，您可以通过 (ab) 使用渐变语法来解决此问题。颜色格式为ARGB。如果您使用Sass预处理器，您可以使用内置函数“ie-hex-str()”转换颜色。
background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
| 归档时间： |
|
| 查看次数： |
1512774 次 |
| 最近记录： |