网站开发进阶（五十玖）css 实现背景透明，文字不透明

2022 年 5 月 12 日
本文字数：1224 字
阅读完需：约 4 分钟

一、解决措施

背景透明，文字不透明的解决方法：

为元素添加一个绝对定位的子元素，设置大小和该元素一样，把半透明加在绝对定位元素上作为遮罩，z-index设置到最底部，达到背景半透明效果。
使用 CSS3 新属性rgba。

实现透明的方法：

css3的opacity，取值从 0 到 1，如opacity : 0.5，IE9及以上版本和标准浏览器都支持。IE8 以及更早的版本支持替代的 filter 属性，例如：filter : Alpha(opacity=50)。
css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如background-color : rgba(255,255,255,0.5)。

谷歌浏览器下测试各种属性，如下：

<div style="width:150px; height:100px;float:left;background-color:#ff0000;"><div>没有设置透明度</div></div>
<div style="width:150px;height:100px;float:left;margin-left:10px;background-color:#ff0000;opacity:0.5;"><div>用opacity设置透明度</div></div>
<div style="width:150px;height:100px;float:left;margin-left:10px;background-color:rgba(255,0,0,0.5);"><div>用rgba设置透明度</div></div>
<div style="width:150px;height:100px;float:left;margin-left:10px;background-color:#ff0000;filter:Alpha(opacity=50);"><div>IE专属filter设置透明度</div></div>

复制代码

效果图如下：

css3的opacity：

由上图可以看出，使用opacity属性的第二个方块，其子元素包含的文字也变成了半透明。

注释：设置opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度，兼容 IE9 及以上版本和标准浏览器。

css3的rgba：

由上图可看出，设置rgba的方块可实现背景色透明，并且子元素包含的文字不透明。

注释：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+都支持。

IE 的filter : Alpha(opacity=x)：仅支持 IE6、7、8、9，在 IE10 版本被废除。

二、拓展阅读 Javascript 追加 style 样式

2.1 前言

在前端开发过程中，会遇到js实现业务逻辑的时候代码式追加元素样式的应用场景。

2.2 思路

1、通过拼接cssText方式实现。

2、通过设置class，累加设置class方式实现。

2.3 代码示例

1、第一种方式可以应用下面函数实现，el表示待追加样式的dom节点，strCss表示待追加的样式。

function setStyle(el, strCss){    function endsWith(str, suffix) {        var len = str.length - suffix.length;        return len >= 0 && str.indexOf(suffix, len) == l;    }    var sty = el.style,        cssText = sty.cssText;    if(!endsWith(cssText, ';')){        cssText += ';';    }    sty.cssText = cssText + strCss;}

复制代码

2、第二种方式把样式定义成class，element表示待追加样式的dom节点，value表示class名称。

function addClass(element,value){    if(!element.className){                element.className=value;  } else {    newClassName=element.className;    newClassName+="";    newClassName+=value;    element.className=newClassName;  }}

复制代码

发布于: 1 小时前阅读数: 6

原文链接:【http://xie.infoq.cn/article/9d600260083cc3d00d63a6454】。文章转载请联系作者。

No Silver Bullet

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣与子同袍

发布

暂无评论

创作场景

网站开发进阶（五十玖）css 实现背景透明，文字不透明

一、解决措施

二、拓展阅读 Javascript 追加 style 样式

2.1 前言

2.2 思路

2.3 代码示例

No Silver Bullet

评论