css_透明技术

冷不防 2022-05-25 05:08 148阅读 0赞

透明技术

实现透明常用的两种方式有：

opacity:x，x 的取值从 0 到 1，如opacity: 0.8

rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255,0.8)

设置opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度。

在background-color中使用rgba，标准浏览器中，背景透明，文字不透明。

注：opacity需要在ie8以上版本才有效，为了兼容，可用如下代码：

opacity:0.9;filter:alpha(opacity=90);

**实例1：**

**    **当鼠标放到图片上时图片上面多一层灰灰的感觉，给用户一种选中的反馈，配合手型光标使用：

<div class="opacity">

<img src="http://img0.bdstatic.com/img/image/2043d07892fc42f2350bebb36c4b72ce1409212020.jpg" width="228" height="304" alt="美女"/>

</div>

.opacity:hover\{

opacity:0.9;/\*图片透明\*/

cursor:pointer;/\*手型光标\*/

\}

结果：

![2018050815574631][]

**实例2：**

在上面的基础上，添加一个文字描述（半透明状）：

<div class="opacity">

<img src="http://XXX020.jpg" width="228" height="304" alt="美女"/>

<span class="fanbb">范冰冰</span>

</div>

.opacity\{

width:228px;

height:304px;

background:\#999;

margin:100px auto;

position:relative;

\}

.opacity .fanbb\{

/\*文字水平居中\*/

text-align:center;

/\*背景颜色\*/

background:\#000;

color:\#fff;

font-weight:500;

font-size:18px;

padding:1px 10px;

/\*边框为圆形\*/

border-radius:15px;

position:absolute;

bottom:12px;

left:15px;

/\*文字不受影响，只有背景透明\*/

background:rgba(0,0,0,0.5);

\}

效果：

![20180508155737251][]

[2018050815574631]: /images/20220525/e7470ba9882f46d2ac1a18bfdcc567dc.png
[20180508155737251]: /images/20220525/970b1ee1ec82468687ecf6911e0bc5eb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，148人围观）

还没有评论，来说两句吧...

相关阅读

相关 css基础 CSS 图片廊、CSS 图像透明/不透明、CSS 图像拼合技术

阅读目录 CSS 图片廊公共的HTML布局 CSS 创建图片廊响应式图片廊 CSS 图像透明/不透明

悠悠/ 2023年10月06日 22:33/ 0 赞/ 54 阅读

相关 css设置背景透明文字不透明，以及字体透明背景不透明的写法

实际展示效果图如下 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

野性酷女/ 2023年07月13日 13:44/ 0 赞/ 20 阅读

相关 css半透明边框

核心：背景色会默认延伸到border下层。这里主要使用到background-clip属性，属性值包括border-box（背景延伸至边框外沿，但是在边框下层），padding

傷城~/ 2022年10月01日 10:50/ 0 赞/ 213 阅读

相关利用css实现背景半透明，文字不透明。

利用css3新增的rgba属性，在新增filter属性兼容ie6、7、8浏览器 .div{ color:white; background-color:rgba(0,

港控/mmm°/ 2022年06月16日 06:24/ 0 赞/ 290 阅读

相关 css_透明技术

透明技术实现透明常用的两种方式有： opacity:x，x 的取值从 0 到 1，如opacity: 0.8 rgba(red, green, blue, alpha

冷不防/ 2022年05月25日 05:08/ 0 赞/ 148 阅读

相关 CSS背景透明文字不透明或者子节点不透明

原文链接：[http://www.jufanshare.com/content/65.html][http_www.jufanshare.com_content_65.html

水深无声/ 2022年05月13日 13:38/ 0 赞/ 261 阅读

相关 CSS实现背景图片透明和文字不透明效果

项目中经常会用到背景图上放一些文字介绍，这里介绍两种技术来实现背景图片透明，文字不透明效果，记录一下，方便日后学习。 1.毛玻璃效果：背景图 + 伪类 + flite:blu

港控/mmm°/ 2022年04月15日 02:45/ 0 赞/ 380 阅读

相关【CSS】图像透明/不透明

实例1 - 创建一个透明图像 CSS3中属性的透明度是 opacity。首先，我们将向您展示如何用CSS创建一个透明图像。正常的图像 ![在这里插入图片描

骑猪看日落/ 2022年03月21日 14:46/ 0 赞/ 300 阅读

相关 css背景透明

css设置div背景透明有两种方法：第一种使用opacity：0~1，这个方法有个缺点，就是内容也会跟着透明；第二种方法就是background-color:rgba(0,0,

Dear 丶/ 2021年12月24日 07:05/ 0 赞/ 406 阅读

相关 CSS 图像透明/不透明opacity

创建透明对象，设置悬停效果 img \{ opacity:0.4; filter:alpha(opacity=40); /\ 适用 IE8 及其更早版本

深碍√TFBOYSˉ_/ 2021年09月15日 06:34/ 0 赞/ 424 阅读