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

时间 2019-12-18

标签如何使用 css 文本图像提供透明背景栏目 CSS 繁體版

原文原文链接

仅使用CSS，是否可使元素的background半透明，但元素的内容（文本和图像）不透明？ css

我想在没有文本和背景做为两个独立元素的状况下完成此操做。 html

尝试时： css3

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 。浏览器

#1楼

这是个人操做方法（它可能不是最佳方法，但它能够工做）： sass

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

而后，在该div的正下方 ，建立另外一个具备不一样类/ id的div。在其中建立一个段落，在其中放置文本。给出div位置：相对和顶部： -295px （即295像素为负）。将其z索引设置为2以得到良好的度量，并确保其不透明度为1。根据须要设置段落样式，但请确保其尺寸小于第一个div的尺寸，以避免溢出。函数

而已。这是代码： spa

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

#2楼

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

虽然全部主要浏览器都支持background-color （CSS 3并不陌生）[1]，可是alpha透明度可能会比较棘手，尤为是对于版本9以前的Internet Explorer和版本5.1以前的Safari带有边框颜色。 [2]

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

[1] W3Schools：CSS背景颜色属性

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

#3楼

CSS 3能够轻松解决您的问题。使用：

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

在此， rgba表明红色，绿色，蓝色和alpha值。因为存在255，所以得到绿色值，而经过0.5 alpha值得到了一半的透明度。

#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')";

#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**
}