如何使用CSS为文本或图像提供透明背景？

2283

仅使用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父元素而言。

html  css  opacity 
— 斯蒂金·桑德斯（Stijn Sanders）
source
16
遗憾的是，CSS3的目标是使用新的颜色模块修复此问题，它允许您在声明颜色时指定Alpha值。w3.org/TR/css3-color
— Meandmycode
71
实际上，子元素的不透明度乘以父元素的不透明度，而不是被覆盖。因此，例如，如果p的不透明度为.6和span的不.5透明度为，则跨度中文本的真实不透明度为0.3。
— chharvey 2012年
1
可以这样猜测，但是由于背景是半透明的，因此您甚至不需要滤镜/不透明度：codepen.io/anon/pen/ksJug
— Stijn Sanders
5
@chharvey如果opacity:.5为父opacity:2元素和子元素定义，应该怎么办？
— 2014年
10
@亚历山大，我很高兴你问了这个问题。从数学上讲，人们会怀疑孩子会回到不透明度1。但是，opacity:2;是无效的CSS。该opacity属性的值必须在包含范围[0,1]之内。
— chharvey 2014年

Answers:

2276

使用半透明的PNG图像或使用CSS 3：

background-color: rgba(255, 0, 0, 0.5);

这是来自css3.info，不透明度，RGBA和妥协的文章（2007-06-03）。

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>
展开摘要

— 彼得·莫滕森
source
86
有可能用十六进制颜色做到这一点吗？像#fff吗？
— grm 2011年
35
@grm：W3C考虑过引入#RRGGBBAA十六进制代码格式，但由于各种原因，他们决定不这样做，所以我们不能。
— outis 2012年
95
与@grm SASS可以，background-color: rgba(#000, .5);
— 于尔根保罗
2
值得指出的是，如果要使用透明性，则每个支持RGBA的浏览器也都支持HSLA，这是一种更加直观的颜色映射。IE8是唯一不支持它的伪有意义的浏览器，因此请禁止继续使用每种颜色的HSL（A）。
— iono
19
@outis：好消息，#RRGGBBAA现在处于颜色级别4中。
— BoltClock
476

在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)";
}

这是通过RGBa和filter从CSS背景透明而不会影响子元素的。

屏幕截图显示结果：

这是在使用以下代码时： 

 <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>

铬33 IE11 IE9 IE8

— Adrien Be
source
1
但不是在IE8中。我尝试了新的-ms-filter语法，但仍然对我不起作用:(
— philfreo
5
这篇文章显示了如何在IE8中执行此操作：robertnyman.com/2010/01/11/…– Slapout
— 2010年
14
@philfreo：如果将塞巴斯蒂安的代码的第一位更改为“ background：rgb（0，0，0）transparent;” 现在应该可以在IE8中使用了。这让我困扰了很长时间！
— 汤姆·钱特勒
filter：progid非常适合IE9。颜色是：透明度，红色，绿色，蓝色-所有两位十六进制值。
— Thorsten Niehues 2012年
1
@AdrienBe-我已按照您的指示编辑了您的答案。不幸的是，我已经离开了这个特殊问答环节的时间，因此我目前无法加入这个对话。
— user664833 2014年
108

这是我能想到的最好的解决方案，而不是使用CSS3。据我所知，它在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>
展开摘要

— 戈尔克姆·帕卡奇
source
19
他说：“没有将文本和背景分成彼此重叠的两个元素。” 无论如何，还是谢谢，这是一个很好的解决方法，并且很有用，但是在某些情况下，您希望不透明元素成为半透明元素的子元素。
— 罗尔夫（Rolf）2010年
我在另一个SO问题上的回答几乎相同，但添加了jsfiddle和屏幕截图证明（IE7 +），如果感兴趣，请看这里stackoverflow.com/a/21984546/759452
— Adrien Be
@Gorkem Pacaci：确保不透明度属性是“真正的”跨浏览器，您可以使用CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity的
— Adrien
为什么不使用伪元素（例如）来:after避免多余的标记呢？
— AndFisher '16
64

对于简单的半透明背景色，上述解决方案（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>标记中。）

与上面列出的类似技术相比，此技术的主要优点是窗格不必为指定的大小。如上面的代码所示，它将适合全宽（正常的块元素布局），并且仅与内容一样高。外部窗格元素的大小可以任意选择，只要它是矩形即可（即，内联块将起作用；普通的内联将不起作用）。

此外，它还为您提供了很大的背景自由度；您可以随意将任何东西放到back元素中，并且不影响内容的流动（如果您想要多个全尺寸子层，只需确保它们也具有以下位置：绝对值，宽度/高度：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层内部的浮动元素将不包含在内。您需要确保清除它们或以其他方式包含它们，否则它们会滑出底部。
  • 边距在panel元素上，而填充在cont元素上。不要使用相反的内容（续上的边距或窗格上的边距），否则您会发现奇怪的地方，例如页面总是比浏览器窗口稍宽。
  • 如前所述，整个事情需要是块或内联块。随意使用<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>
展开摘要

这是正在广泛使用的技术的现场演示：

christmas-card-2009.slippyd.com屏幕截图

— 斯利普·汤普森
source
在什么情况下，您不想使用CSS3？
— Burkely91 2015年
@ Burkely91如果可以在CSS3中做到这一点，那么绝对使用它。但是CSS3背景不支持所有类型的内容，也不支持完整的布局灵活性。由于独立重复的边缘和中心填充，上面的信封/字母示例将很难用CSS3实现。另外，请记住，这个答案最初是5年前写的，当时CSS3的支持还没有广泛普及。
— Slipp D. Thompson
2
@Igor Ivancha回滚您的更改。抱歉，将缩进方式从我喜欢的形式（制表符）更改为您的缩进形式（2个空格）并不妙。您可能有充分的理由在日常代码项目中使用2空格缩进，但是对于在Web上进行演示，我相信制表符显然是有好处的-更深的缩进使得分辨层次结构层次更加容易，而且远更容易可靠地将制表符转换为空格，因此所有阅读器的兼容性都更高。
— Slipp D. Thompson
@Igor Ivancha同样，您似乎通过美化程序运行了代码，该美化程序将每个CSS选择器和属性放在自己的行上。我的示例是用有意的换行符和空格编写的，以逻辑方式将读者应该理解的片段组合在一起-例如，大多数width:＆height:属性共享一条直线，因为它们是同一类型的构造，并且更好地理解为二维形状，而不是一对一维约束。此外，其中一些行包含了很多内容，因为重复的内容并不是很重要。
— Slipp D. Thompson
@Igor Ivancha逻辑组织，分组和样式对于编写理智，易于理解的代码非常重要，就像在进行各种编写时一样。您所做的更改等同于进入某人的帖子并删除所有段落中断，并在每个句子后加上一个强制换行符。如果您想在自己的作品中成为那种笨拙的书呆子，那很好，您可以自由地这样做。但是，请不要在别人的作品中简化语义特征和表达方式。
— Slipp D. Thompson
58

最好使用半透明的.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');
}
— 社区
source
54

有一个最小化标记的技巧：使用 伪元素作为背景，您可以为其设置不透明度，而不影响主元素及其子元素：

演示

输出：

具有伪元素的背景不透明度

相关代码：

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及更高版本。

— 网络提基
source
23

最简单的方法是使用半透明的背景PNG图像。

您可以使用JavaScript使其在Internet Explorer 6中运行中运行。

我使用Internet Explorer 6中的透明PNG中概述的方法。

除此之外，您可以使用两个并排的同级元素来伪造它-使一个半透明，然后将另一个绝对定位在顶部。

— 克里斯
source
2
我需要的只是一个简单的背景色，您建议我用这种颜色创建哪种PNG尺寸？1x1会使渲染工作量很大，太多的像素会使PNG变得很大（压缩后文件大小应该可以，但是渲染仍需要对其进行解压缩才能使用它）...
— Stijn Sanders
3
我建议使用30px x 30px之类的东西，它在重复渲染时使用的内存少于1x1，并且仍然足够小以最小化带宽使用。
— 克里斯，2009年
21

此方法不仅可以让您在背景中显示纯色图像，还可以使其他属性（如边框）​​具有透明性。不需要透明的PNG图像。

在CSS中使用:before（或:after）并赋予它们不透明度值，以使元素保持其原始不透明度。因此，您可以使用：before来创建一个人造元素，并为其提供所需的透明背景（或边框），并将其移动到要保持其不透明性的内容后面z-index。

一个例子 （小提琴）（请注意，DIVwith类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（使用零值或更适合您需要的值）。

— 冰冻的锦鲤
source
17

问题在于，示例中的文本实际上具有完全的不透明度。p标签内部完全不透明，但是p标签只是半透明的。

您可以添加半透明的PNG背景图像而不是在CSS中实现，也可以将文本和div分成两个元素，然后将文本移到框上（例如，负边距）。

否则将无法实现。

就像克里斯提到的那样：如果您使用透明的PNG文件，则必须使用JavaScript解决方法才能使其在讨厌的Internet Explorer中工作。

— 斯文·芬克
source
15

几乎所有这些答案都假定设计人员想要纯色背景。如果设计师实际上想要照片作为背景，则目前唯一真正的解决方案是JavaScript，如其他地方提到的jQuery Transify插件。

我们需要做的是加入CSS工作组讨论，并使他们为我们提供一个background-opacity属性！它应该与多背景功能协同工作。

— 士兵
source
14

这是我的操作方法（它可能不是最佳方法，但它可以工作）：

创建div您要半透明的。给它一个类/ ID。给它空，然后将其关闭。为其设置高度和宽度（例如300像素乘300像素）。使其不透明度为0.5或任何您喜欢的颜色，并提供背景色。

然后，在该div的正下方，创建另一个具有不同类/ id的div。在其中创建一个段落，在其中放置文本。给div位置：相对的，顶：-295px（这就是负 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。

— paris ionescu
source
可以避免使用多余的元素，而应使用伪元素，例如:before:after
— Frozenkoi 2013年
9

如果您是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**
}
— 苏拉杰·拉瓦特
source
8

为了使元素的背景半透明，但元素的内容（文本和图像）不透明，您需要为该图像编写CSS代码，并且必须添加一个opacity具有最小值的属性。

例如，

.image {
   position: relative;
   background-color: cyan;
   opacity: 0.7;
}

//值越小，则透明度越高，或者值越小，透明度越高。

— 普什普·辛格
source
这是在现代浏览器中执行此操作的一种方法。我将其与rgba值结合起来作为备用广告
— Tahir Khalid
是，对的。这是处理现代浏览器的方法之一。
— Pushp Singh
您的意思是“少赚多少钱就等于透明”（似乎难以理解）？（如果需要，请编辑您的答案，而不是在评论中进行答复。）
— Peter Mortensen19年
7

CSS 3可以轻松解决您的问题。采用：

background-color:rgba(0, 255, 0, 0.5);

在这里，rgba代表红色，绿色，蓝色和Alpha值。由于存在255，因此获得绿色值，而通过0.5 alpha值获得了一半的透明度。

— 图赫德·拉曼（Touhid Rahman）
source
这与以前的答案有何不同？
— 彼得·莫滕森
6

background-color：rgba（255，0，0，0.5）;如上所述，这是最好的答案。要说即使在2013年使用CSS 3，也不是一件容易的事，因为各种浏览器的支持水平会随着每次迭代而变化。

而 background-color所有主流浏览器都支持（不是CSS 3的新增功能）[1]，但是alpha透明度可能会比较棘手，尤其是对于版本9之前的Internet Explorer和版本5.1之前的Safari带有边框颜色。[2]

使用Compass或SASS之类的东西确实可以帮助生产和跨平台兼容性。

[1] W3Schools：CSS background-color属性

[2] 诺曼博客：浏览器支持清单CSS3（2012年10月）

— 威尔·尼尔森
source
4

您可以通过（ab）使用渐变语法来解决Internet Explorer 8的问题。颜色格式是ARGB。如果使用的是Sass预处理程序，则可以使用内置函数“ ie-hex-str（）”转换颜色。

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
— 亨里克
source
4

您可以使用纯CSS 3：rgba(red, green, blue, alpha)，这里alpha是你想要的透明度。不需要JavaScript或jQuery。

这是一个例子：

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}
— 彼得·莫滕森
source
3 
<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/？

— Premgowda
source
2

您可以rgba color code使用CSS，例如下面的示例。

.imgbox img{
  height: 100px;
  width: 200px;
  position: relative;
}
.overlay{
  background: rgba(74, 19, 61, 0.4);
  color: #FFF;
  text-shadow: 0px 2px 5px #000079;
  height: 100px;
  width: 300px;
  position: absolute;
  top: 10%;
  left: 25%;
  padding: 25px;
}
<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>
展开摘要

— 鲁德拉
source
1

有一个更简单的解决方案，可以在同一div上的图像上放置叠加层。这不是正确使用此工具的方法。但是，使用CSS进行覆盖时就像一种魅力。

使用这样的插入阴影：

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

就这样 ：）

— edd2110
source
1

您可以在CSS中使用RGBA 。像这样：(red, green, blue, alpha)

因此，只需执行以下操作即可在您的情况下工作：

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}
— 阿里雷扎
source
1

根据我的观点，使用不透明的背景色的最佳方法如下。如果使用此选项，则不会丢失其他元素（如测试颜色，边框等）的不透明度。

background-color: rgba(71, 158, 0, 0.8);

使用不透明的背景色

background-color: rgba(R, G, B, Opacity);

在此处输入图片说明

— 维诺德·库马尔（Vinod Kumar）
source
0

我通常在工作中使用此类。这是相当不错。

.transparent {
  filter: alpha(opacity=50); /* Internet Explorer */
  -khtml-opacity: 0.5;       /* KHTML and old Safari */
  -moz-opacity: 0.5;         /* Firefox and Netscape */
  opacity: 0.5;              /* Firefox, Safari, and Opera */
}
展开摘要

— 曾库鲁·迈克尔（Cengkuru Michael）
source
0

使用格式时它对我有用，#AARRGGBB所以对我有用#1C00ff00。试试看，因为我已经看到它为某些人工作，而不为其他人工作。我在CSS中使用它。

— 唐纳德·沙希尼
source
0

您可以使用附加到十六进制值的不透明度值：

background-color: #11ffeeaa;

在此示例中aa是不透明度。不透明度00表示透明，ff表示纯色。

不透明度是可选的，因此您可以像往常一样使用十六进制值：

background-color: #11ffee;

您还可以将旧方法用于rgba()：

background-color: rgba(117, 190, 218, 0.5);

和background速记，如果你想确保后台没有其他款式，如图片或渐变：

background: #11ffeeaa;

根据Mozilla的规范（https://developer.mozilla.org/en-US/docs/Web/CSS/background-color）：

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #bf0;       /* Fully opaque shorthand */
background-color: #11ffee00;  /* Fully transparent */
background-color: #1fe0;      /* Fully transparent shorthand  */
background-color: #11ffeeff;  /* Fully opaque */
background-color: #1fef;      /* Fully opaque shorthand  */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;
— AMS777
source
-2

您可以使用不透明的RGB颜色，例如RGB中的颜色代码（63，245，0），并添加不透明性（例如63、245、0、0.5），也可以用RGBA替换RGB。A用于不透明。

div {
  background: rgba(63, 245, 0, 0.5);
}
展开摘要

— 维杰·夏玛（Vijay Sharma）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.