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

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

div {
  background: rgba(63, 245, 0, 0.5);
}

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

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

.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 */
}

您可以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>

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

使用这样的嵌入式阴影：

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

就这样 ：）

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

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

使用不透明的背景色

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

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

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

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

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

span {
  color: white;
}

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背景颜色属性

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

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

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

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

如果您使用的是Less，则可以使用fade(color, 30%)。

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

例如，

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

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

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

这是一个例子：

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}

如果您是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的跨浏览器背景透明性》中对此进行了介绍。

奇怪的是Internet Explorer 6允许您使背景透明，并使顶部的文本完全不透明。然后，对于其他浏览器，我建议使用透明的PNG文件。

这是一个jQuery插件，可以为您处理所有事情，Transify（Transify-一个jQuery插件，可以轻松地将透明度/不透明度应用于元素的背景）。

我时不时地遇到这个问题，所以我决定写一些可以使生活变得更加轻松的东西。该脚本小于2 KB，只需要一行代码即可运行，并且，如果您愿意，它还可以处理动画的背景不透明性。

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

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

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

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

否则将无法实现。

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

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

如果需要，可以使用JavaScript使它在Internet Explorer 6中运行。

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

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

这是我能想到的最好的解决方案，而不是使用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>

使用半透明的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>