我怎么给文本或图像透明的背景使用CSS?

StackOverflow https://stackoverflow.com/questions/806000

  •  03-07-2019
  •  | 
  •  

题

它是可能的，使用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 的父母。

有帮助吗？

解决方案

使用半透明的 PNG 图片或使用CSS3：

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>

其他提示

在Firefox 3和Safari 3中，您可以使用RGBA，例如 Georg Sch <！>＃246; lly提到。

一个鲜为人知的诀窍是你可以在Internet <！>资源管理器中使用它，也可以使用渐变过滤器。

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>

这是我能提出的最佳解决方案，而不是使用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>

对于一个简单的半透明的背景的颜色，上述解决方案(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> 标记是绝对的，改变从窗 <p> 来一个 <span> 和包装所有的是在一个绝对位置 <p> 标记。)

主要利用这种技术具有过类似的上面列出的是，窗格没有被指定的尺寸；作为上述编码，它将配合全宽度(正常框元的布局)和唯一的内容。外窗格元，可以大小的任何方式请你，只要它是长方形(即内联框会的工作；普通老联将不是)。

此外，它给你很多自由的背景；你要把真的什么都在回元素并不影响流动的内容(如果你想要多个全尺寸的分层，只要确保他们还有的位置：绝对的，宽度:100%，和上下左右：汽车).

一种变化，以允许背景的插图的调整(通过上下左右)和/或背景钉住(通过删除一个左右或以上/下对)是使用以下CSS替代：

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

作为书面的，这在火狐，Safari、铬、IE8+和歌剧，虽然IE7和IE6需要额外的CSS和表达方式，请参考，并且我最后一次检查，第二CSS变化不工作在歌剧院。

事情看出：

  • 浮动元素内部的cont层将不包含的。你会需要确保它们清除或无包含，否则他们就会溜出来的底部。
  • 利润去窗件和填补上cont元。不使用相反的(利润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 screenshot

最好使用半透明.png 。

只需打开 Photoshop ，即可创建2x2像素图像（选择1x1会导致Internet <！>资源管理器错误！ ），用绿色填充它，并在<！>“层数”标签<！>中设置不透明度。到60％。然后保存并使其成为背景图像：

<p style="background: url(green.png);">any text</p>

当然，它很酷，除了可爱的 Internet <！>资源管理器<！> nbsp; 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');
}

有一个窍门，以尽量减少标记：使用 伪件 作为背景和可以设置的透明度，而不影响主要元素及其儿童：

演示

输出：

Background opacity with a pseudo element

相关代码:

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 Explorer8 和以后。

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

如果需要，您可以使用JavaScript使其在Internet Explorer 6中工作。

我使用 Internet Explorer 6中的透明PNG

除此之外，

你可以使用two side-by-side sibling elements伪造它 - 使一个半透明，然后absolutely position the other over the top？

这种方法可以让你有一个图像的背景和不只一个坚实的颜色，可用于具有透明度的其他属性，例如边界。没有透明PNG图像的需要。

使用 :before (或 :after)在CSS，并给予他们的不透明的价值离开件在其原来的透明度。因此，你可以使用之前使一个人造的元件，并给它透明的背景(或边界)你想要和移动，它在后面你想要的内容保持不透明与 z-index.

一个例子(小提琴)(注意， DIV 与类 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 (使用价值为零或什么更适合你的需要)。

问题是，文本实际上在您的示例中完全不透明。它在p标记内具有完全不透明度，但<=>标记只是半透明的。

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

否则将无法实现。

编辑：

就像Chris提到的那样：如果你使用具有透明度的PNG文件，你必须使用JavaScript解决方法使它在讨厌的Internet Explorer中工作......

几乎所有这些答案都假设设计师想要纯色背景。如果设计师真的想要一张照片作为背景，那么目前唯一真正的解决方案是JavaScript，就像jQuery Transify插件在别处提到。

我们需要做的是加入CSS工作组讨论并让它们为我们提供background-opacity属性！它应与多背景功能携手合作。

这是我如何做到这一点（它可能不是最佳的，但它有效）：

创建您想要半透明的div。给它一个类/ id。保持EMPTY，然后关闭它。给它一个设定的高度和宽度（比如300像素乘300像素）。给它一个0.5的不透明度或任何你喜欢的颜色和背景颜色。

然后，直接在该div下面，创建另一个具有不同类/ id的div。在其中创建一个段落，您可以在其中放置文本。给出-295px位置：relative和top：<=>（那是NEGATIVE 295像素）。给它一个z-index为2以获得良好的度量，并确保其不透明度为1.根据需要设置段落的样式，但要确保尺寸小于第一个<=>的尺寸，以便它不会溢出。 / p>

就是这样。这是代码：

.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，我不了解互联网<！>资源管理器。

这是一个jQuery插件，可以为你处理一切，Transify（ Transify - 一个jQuery插件，可以轻松地将透明度/不透明度应用于元素<！>＃8217; s background ）

我时不时地遇到这个问题，所以我决定写一些能让生活更轻松的东西。该脚本不到2英寸KB，只需1行代码即可使用，如果您愿意，它还可以处理动画背景的不透明度。

背景的不透明度，但不是文字 有一些想法。使用半透明图像，或覆盖其他元素。

前段时间，我在使用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**
}

为了使元素的背景半透明但是元素的内容（text <！> amp; images）不透明。您需要为该图像编写css代码，并且必须添加一个名为opacity且具有最小值的属性。 e.g。

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

//值越小透明度越高，值越小透明度。

background-color：rgba（255,0,0,0.5）; 如上所述是最简单的答案。要说使用CSS3，即使在2013年，也不简单，因为各种浏览器的支持程度随着每次迭代而变化。

虽然所有主流浏览器都支持background-color（不是CSS3的新手）[1]，但Alpha透明度可能会非常棘手，特别是对于版本9之前的Internet Explorer以及版本5.1之前的Safari上的边框颜色。 [2]

使用指南针或 SASS 可以真正帮助生产和跨平台兼容。

[1] W3Schools：CSS background-color Property

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

CSS3可以轻松解决您的问题。使用：

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

这里，rgba代表红色，绿色，蓝色和alpha值。获得绿色值是因为255，半透明度是通过0.5 alpha值获得的。

如果您使用减少，则可以使用fade(color, 30%)。

您可以通过互联网<！>资源管理器<！> nbsp; 8 解决此问题通过（ab）使用渐变语法。颜色格式为ARGB。如果您使用的是 Sass 预处理器，则可以使用内置函数转换颜色<！> QUOT;即 - 己STR（）QUOT <！>; 

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

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

以下是一个例子：

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

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

有一种更简单的解决方案，可以在同一个div上的图像上叠加。这不是正确使用这个工具。但就像使用CSS制作叠加层的魅力一样。

使用这样的插入阴影：

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

这就是全部：）

您可以在 CSS 中使用 RGBA (red, green, blue, alpha)，如下所示：

所以简单地做一些像你这样的事情就可以了：

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

span {
  color: white;
}
  

你可以用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>

我通常使用这个课程来完成我的工作。非常好。

.transparent {
  filter: alpha(opacity=50); /* internet explorer */
  -khtml-opacity: 0.5;      /* khtml, old safari */
  -moz-opacity: 0.5;       /* mozilla, netscape */
  opacity: 0.5;           /* fx, safari, opera */
}

根据我的观点，如果我们使用它，最好的方法是使用不透明度的背景颜色，那么我们不会失去其他元素的不透明度，如测试颜色和边框等。

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

使用不透明度的背景颜色

背景色：RGBA（R，G，B，不透明度）;

你可以使用不透明度的RGB颜色，如RGB（63,245,0）中的这种颜色代码，并添加不透明度（63,245,0,0.5），并添加RGBA替换RGB。用于不透明度

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top