css中，如何设置前景色的透明度？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css中，如何设置前景色的透明度？相关的知识，希望对你有一定的参考价值。

谢谢

1、准备好初始化的代码

<html>

<head>

<meta charset="utf-8"/>

<style>

</style>

</head>

<body>

<div></div>

</body>

</html>

2、初始化样式

div

border:1px red solid;

width:800px;

height:800px;

background-color:blue;

3、运行结果为

4、设置背景颜色半透明的样式代码background-color:rgba(0,0,255,0.5);

5、运行结果为

透明原理：把背景颜色设置为rgb的方式，然后再加一个透明度就可以设置为半透明了。

注意：设置背景颜色时哪里应该写成rgba。

 参考技术A

一、首先HTML布局：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css设置前景色透明</title>
</head>
<body>
<div class="box">我是一段文字</div>
</body>
</html>

二、没有加CSS的样式的效果显示：

三、加CSS样式的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css设置前景色透明</title>
<style type="text/css">
.box 
width: 700px;
height: 350px;
margin: 0 auto;
color: white;
background-color: orange;
/*color: orange; 这个方式从视觉上是透明了的，原理就是把文字颜色设置成与背景颜色一样  有局限性 双击看得到文字 */
color: transparent; /*根上面方法一样 双击看得到文字 比上面好 推荐*/


</style>
</head>
<body>
<div class="box">我是一段文字</div>
</body>
</html>

在开发工具里面的截图：

四、加了CSS样式的效果图：

 参考技术B alpha是来设置透明度的。先来看一下它的表达格式：
filter：alpha（opacity=opcity，finishopacity=finishopacity，
style=style，startX=startX，startY=startY，finishX=finishX，
finishY=finishY）

哇，怎么这么长。是啊，不过这些参数都各有其用。
Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。
Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。
从上面讲的我们可以看出，如果不设置透明渐变效果，那么只需设置opacity这一个参数就可以了。

实现上面这种效果的代码如下：

<html>
<head>
<title>alpha</title>
<style>//*定义CSS样式*//
<!--
divposition：absolute； left：50；top：70； width：150；
//*定义DIV区域内的样式（位置为绝对定位，left、top、width的坐标）*//
imgposition：absolute；top：20；left：40；
filter：alpha(opacity=80)
//*定义图片的样式，绝对定位，滤镜属性是透明度为80*//
-->
</style>
</head>
<body>
<div>
<p style=“font-size：48；font-weight：bold；color：red；”>
Beautiful </p>//*定义字体属性，前景色为红色*//
</div>
<p><img src=“ss01076.jpg”> </p>
//*导入一张图片*//
</body>
</html> 参考技术C css控制透明度倒不麻烦。
filter:alpha(opacity=50); /*IE滤镜，透明度50%*/
-moz-opacity:0.5; /*Firefox私有，透明度50%*/
opacity:0.5;/*其他，透明度50%*/

举个例子：
通过ie6 ie7 ie8 ff3 opera 谷歌 safari测试
#test
background-color:#0000CC;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
width:100px;
height:100px;

但是还是会有很多问题，浏览器兼容性问题，等
而且IE滤镜的频繁使用会使浏览器的执行效率降低。

所以不提倡过多使用。

也还有其他方法可以模拟，比如用宽高都是1px的透明png图片覆盖等等。

/**************************************************/
LZ自己举一反三啊，前景色不就是color么
#test
background-color:#000
#test span
color:#fff;
zoom:1 /*触发IE下块级元素*/
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;

<div id="test"><span>前景色透明度</span></div>

LZ看看“前景色透明度”这几个字是不是纯白色，还是白色的50%透明。本回答被提问者采纳 参考技术D 把类为box的层设为透明。
<div class="box"></div>
<style>
.boxwidth:300px; height:200px; margin:0 auto; boxder:1px solid #ccc; background:#000; filter:alpha(opacity:30); opacity:0.3; -moz-opacity:0.3;-khtml-opacity: 0.3
</style>
其中background:#000; filter:alpha(opacity:30); opacity:0.3;为关键代码，当opacity值为1时，表示完全不透明，为0时表示完全透明。
其关的属性介绍如下:
opacity: 0.3；这是“最重要的”，因为它是在CSS的现行标准。这将在Firefox，Safari和Opera的大多数版本的工作。这将是所需要的一切如果所有的浏览器都支持目前的标准。
filter:alpha(opacity=50); /*IE滤镜，透明度50%*/

-moz-opacity:0.5; /*Firefox私有，透明度50%*/
opacity:0.5;/*其他，透明度50%*/

如何设置透明覆盖 WMS 图层的样式

【中文标题】如何设置透明覆盖 WMS 图层的样式【英文标题】：How to style transparent overlayed WMS layer 【发布时间】：2011-11-30 02:43:28 【问题描述】：

我在谷歌地图v3中成功overlayed a WMS layer，但是，由于瓷砖上的信息在透明时是黑色的，所以在深色背景（如卫星地图）上看不太清楚，例如看一些瓷砖：

（This was the WMS link 检索该图块）

问题：如何修改上述 WMS 请求，将前景色（目前为黑色）更改为自定义颜色（例如红色）？ 换句话说，如何设置图层样式？服务器显然能够为这一层执行此操作，因为可以通过their web map application（仅适用于 IE）执行此操作，您可以在其中选择颜色。例如，请参阅此地图图像：

（The following link 用于检索图像 - 请注意它包含比例和徽标，因此它不是正确的平铺。）

不幸的是，这个 Web 应用程序不使用 WMS 来获取这个样式化的地图，所以我不能只是将样式化参数复制到 WMS 请求中。 我必须通过 WMS 请求进行样式设置（因为这种其他请求格式是专有的，检索整个地图 - 不是为图块设计的 - 而且它似乎不支持 WGS 坐标） - 如何我应该这样做吗？

我尝试过：

    看WMS documentation，尤其是version 1.1.1 看看SLDs，但它似乎很难掌握...... 查看 WMS 服务器的 GetCapabilites command output 另外，查看DescribeLayer 和GetStyles 所需图层（HLMCR）的命令输出后，我什至不知道该图层是否支持WMS 上的样式...

我迷路了，如果你指出我正确的方向，我将不胜感激 - 或者如果它甚至可以在 WMS 中解决（对于这一层），我将不胜感激。

“不可能”对我来说也是一个有用的答案！

提前致谢。

【问题讨论】：

由于 WMS 是将空间数据转换为图像的服务，因此您必须为服务提供样式以进行渲染并在响应中将该图像发回给您； SLD是去这里的方式。您可以创建自己的样式，然后使用 SLD_BODY 参数或指向末尾带有该 SLD 样式的 URL 的 SLD 参数发送附加该样式的请求。 提到的服务似乎已经不存在了，以下哪个服务提供了类似的层（捷克语不是我的强项）：http://geoportal.uhul.cz/wms_mysl/service.svc/get?request=GetCapabilities&amp;service=WMS&amp; 或http://geoportal.uhul.cz/wms_oprl/service.svc/get?request=GetCapabilities&amp;service=WMS&amp; 【参考方案1】：

乍一看，这是一个 Mapserver 5.x 实现，getCapabilities 指出 UserDefinedSymbolization SupportSLD="1" 在 Map 级别启用，这意味着所有层都应该继承它。

因此，理论上您应该能够在 GET 请求中或在某个文件中提供 SLD，并将 SLD 的 URL 提供给 GET 请求，然后一切就绪。

编写 SLD 会很烦人，但是如果您认为自己有一些 SLD 应该可以工作但没有用，请将其粘贴到此处。

【讨论】：

感谢 jlivni。你有一些简单的例子，可以很容易地为我的目的重写吗？我只需要更改一个属性的一种颜色（前景色）。以及如何获取该属性的名称，该名称用于在 SLD 中引用它。谢谢【参考方案2】：

使用从 WMS 读取图像并重新着色的包装脚本：

包装器

这是一个用 PHP 编写的示例：

<?php
$url = $_GET['url'];
$im = imagecreatefrompng($url);

if($im && imagefilter($im, IMG_FILTER_COLORIZE, 255, 0, 0, 0))
    // this line is only needed if original image has transparency (32bit/pixel)
    // and you want to preserve that transparency
    imagesavealpha($im, true);

    header('Content-type: image/png');
    imagepng($im);
else
    echo 'Conversion failed.';


imagedestroy($im);
exit;
?>

然后，您无需调用 WMS 链接，而是调用包装器并将 WMS 链接作为参数传递 (recolor_png.php?url=...)。包装器读取原始图像并返回带有彩色版本的新 PNG。不要忘记您作为参数传递的链接必须经过 urlencoded 才能正常工作（所有特殊字符都替换为其 %XX 十六进制表示法）。在 JavaScript 中，您可以使用 encodeURIComponent() 方法来做到这一点。

这是一个在我的服务器上使用您的链接和上述包装器的工作示例：

http://www.digilog.de/pub/***/recolor_png2.php?url=http%3A%2F%2Fgeoportal2.uhul.cz%2Fwms_oprl%2F%3FSERVICE%3DWMS%26REQUEST%3DGetMap%26SERVICE%3DWMS%26VERSION%3D1.1.1%26LAYERS%3DHMLCR%26FORMAT%3Dimage%2Fpng%3B%2520mode%3D24bit%26FGCOLOR%3D0xFF0000%26TRANSPARENT%3DTRUE%26SRS%3DEPSG%3A4326%26BBOX%3D16.58935546875%2C49.37522008143603%2C16.600341796875%2C49.38237278700955%26WIDTH%3D256%26HEIGHT%3D256%26STYLES%3D

这是生成的图像（半透明版本）：

（来源：digilog.de）

没有半透明输出的相同包装器（从代码中删除了imagesavealpha）：

http://www.digilog.de/pub/***/recolor_png.php?url=http%3A%2F%2Fgeoportal2.uhul.cz%2Fwms_oprl%2F%3FSERVICE%3DWMS%26REQUEST%3DGetMap%26SERVICE%3DWMS%26VERSION%3D1.1.1%26LAYERS%3DHMLCR%26FORMAT%3Dimage%2Fpng%3B%2520mode%3D24bit%26FGCOLOR%3D0xFF0000%26TRANSPARENT%3DTRUE%26SRS%3DEPSG%3A4326%26BBOX%3D16.58935546875%2C49.37522008143603%2C16.600341796875%2C49.38237278700955%26WIDTH%3D256%26HEIGHT%3D256%26STYLES%3D

以及生成的不透明图像：

（来源：digilog.de）

我会将这些包装器留在网上几天供您测试。

缓存

由于这种转换是处理器密集型的，因此向包装器添加一些缓存代码可能是明智之举：

从给定的 URL 创建一个哈希码，例如：$hash=md5($url) 检查存储子文件夹中是否存在名为 $hash.png 的图像 如果是：从文件中读取图像并返回 否则：创建图像，将其保存为 $hash.png 的子文件夹并立即返回

如果您希望您的 WMS 内容会随着时间的推移而发生变化：还要检查缓存图像的创建日期，如果它们太旧（例如一个月左右），请清除它们。因此，对 WMS 地图的任何更改都会在最长一个月后波及您的系统。

【讨论】：

嗨@Jpspy！感谢您的回答！由于延迟增加，这当然不是一个理想的解决方案，但它相当简单和优雅，所以如果其他一切都失败了，这对我来说是一个很好的“补救解决方案” - 谢谢！我已经生成了图像并将其添加到您的答案中。没有正确转换抗锯齿存在一个小问题 - 有黑色的残余暗示。也许是因为它是 PNG 并且抗锯齿是半透明的。你知道如何改变整个图像的色调吗？我认为这会有所帮助。谢谢！ 我找到了something，但是逐个像素地重新着色地图图块会非常慢......理想的情况是像你一样为此调用一个 php 函数。 没问题。如果您的原始图像是透明的，则必须在代码中再添加一行以激活透明 PNG 输出：imagesavealpha($im, true); 在行 $im = imagecreatefrompng($url); 之后。我将把它添加到上面的代码中并添加第二个包装器。 谢谢！仍然有一点点黑色（尝试缩小，在 mozilla 中按 Ctrl+）。你知道为什么吗？ 不。看起来实际上像一个 PHP 错误。您可以使用imagefilter($im, IMG_FILTER_COLORIZE, 255, -255, -255) 使红色流血更多一点。但基本上所有半透明的边缘都有一种奇怪的黑色。【参考方案3】：

WMS 链接已经有一些自定义参数，可让您完全按照您的要求进行操作。 链接如下：

  http://geoportal2.uhul.cz/mapserv/php/mapserv3.php?project=oprl_2011&mode=map&mapsize=256%20256&layers=HMLCR%20&x=1322616184548&map_SMO_class_0_color=0%200%200&map_HMLCR_class_0_color=255%200%200&mapext=-679915.1258015268%20-1062651.2224427482%20-679660.3694656485%20-1062461.062442748

如果您检查它，您会注意到在所有 url 编码参数之间有一个有趣的参数称为：ma​​p_HMLCR_class_0_color

如果您将其值更改为绿色（其 RGB 代码为 0,255,0），则图层将呈现为绿色。颜色以 RGB 代码表示。还有另一个参数 ma​​p_SMO_class_0_color 但我不明白它的作用。也许它设计了一些在该请求中不可见的功能？

绿色示例：

 http://geoportal2.uhul.cz/mapserv/php/mapserv3.php?project=oprl_2011&mode=map&mapsize=256%20256&layers=HMLCR%20&x=1322616184548&map_SMO_class_0_color=0%20100%20200&map_HMLCR_class_0_color=0%20255%200&mapext=-679915.1258015268%20-1062651.2224427482%20-679660.3694656485%20-1062461.062442748

产生以下内容：

地图服务器中关于 rgb 颜色表示的注释

RGB 三元组必须在请求中写成如下：

R G B

（请注意，空格是必需的）。 谁的 URl 编码表示是：

R%20G%20B

因为 %20 是 URL 中空间的编码方式。

【讨论】：

嗨 unicoletti，这不是 WMS 链接！这是服务器上的另一个请求接口，用于检索完整的地图。我知道我可以做到这一点，正如您在我的问题中看到的那样我已经发布了一个如何将图层着色为红色的示例！ 我正在寻找一种如何使用 WMS 做到这一点的方法。

以上是关于css中，如何设置前景色的透明度？的主要内容，如果未能解决你的问题，请参考以下文章

如何在 PHP 中使用 GD 设置透明背景？

如何设置透明覆盖 WMS 图层的样式

CSS颜色样式

如何设置Android中控件的颜色透明度

如何设置Android中控件的颜色透明度

使用CSS，如何在首页设置背景色不影响子页的背景色