html - opacity兼容 - opacity翻译




如何使用CSS为文本或图像提供透明背景? (18)

您可以使用css来执行rgba color code如下面给出的示例。

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

是否有可能,仅使用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父母的opacity:0.6


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

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

这里,rgba代表红色,绿色,蓝色和alpha值。 由于255获得绿色值,并且通过0.5α值获得半透明度。


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

背景色:RGBA(255,0,0,0.5); 如上所述是最简单的答案。 要说使用CSS3,即使在2013年,也不简单,因为各种浏览器的支持程度随着每次迭代而变化。

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

使用CompassSASS类的东西可以真正帮助生产和跨平台兼容。

[1] W3Schools:CSS背景色属性

[2] Norman博客:浏览器支持清单CSS3(2012年10月)



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

我们需要做的是加入CSS工作组讨论并让它们给我们一个background-opacity属性! 它应该与多背景功能携手合作。


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


如果你是一个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**
}

对于简单的半透明背景颜色,上述解决方案(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窗格上的position: relative很重要; 它告诉后面层适合窗格的大小。 (如果您需要<p>标记为绝对标记,请将窗格从<p>更改为<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>而不是<span>来简化您的CSS。

一个更全面的演示,通过与display: inline-block一起使用,以及auto和特定width s / min-height s来display: inline-block这种技术的灵活性:

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

这是一个广泛使用的技术的现场演示


您可以使用不透明度的RGB颜色,如RGB(63,245,0)中的此颜色代码,并添加不透明度(63,245,0,0.5),并添加RGBA替换RGB。 用于不透明度

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


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

这是一个例子:

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

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

所以,简单地做这样的事情就可以适用于你的情况:

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

span {
  color: white;
}

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

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

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

除此之外,

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


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

使用这样的插入阴影:

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

就这样 :)


此方法允许您在背景中拥有图像,而不仅仅是纯色,并且可以用于在其他属性(如边框)​​上具有透明度。 不需要透明的PNG图像。

在CSS中使用:before (或:after )并为它们提供不透明度值,使元素保持原始不透明度。 因此,您可以使用:before之前制作一个虚假元素并为其提供所需的透明背景(或边框),并将其移动到您希望使用z-index保持不透明的内容之后。

一个例子( fiddle )(请注意,带有dadDIV只是为了提供一些上下文和颜色的对比,实际上不需要这个额外的元素,并且红色矩形向下移动一点向右移动以使其可见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 (使用零或任何更适合您需要的值)。



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


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

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

否则就不可能。

编辑:

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





opacity