css如何让背景透明，文字不透明

最新推荐文章于 2023-04-13 14:42:25 发布

会飞的胖达喵

最新推荐文章于 2023-04-13 14:42:25 发布

阅读量797

点赞数

分类专栏：前端笔记

本文链接：https://blog.csdn.net/lengyue1084/article/details/103582894

版权

前端笔记专栏收录该内容

131 篇文章

订阅专栏

今天写个效果，想让背景透明，直接设置
opacity:0.4;
导致文字也模糊了，该属性因该是应用在整个盒子上的。
只需给背景单独添加透明度即可
background:rgba(204,204,204,0.2);
颜色十六位的可以在换成RGB，最后一位标识透明度。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

会飞的胖达喵

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS实现背景透明文字不透明的可行方法(兼容各浏览器)

12-13

以下是一个实现背景透明文字不透明的示例代码： ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ; charset=utf-8" /> ...

CSS实现背景透明文字不透明兼容各种浏览器有图有真相

12-13

IE6是大家都十分头痛的一个浏览器，为了...背景透明</title><style>body{margin:0;padding:0;}.back{width:800px;height:700px;background:url(images/超级金属.png);background-repeat:no-repeat;padding

参与评论您还未登录，请先登录后发表或查看评论

css怎么可以只让背景透明文字不透明

no_difficulty的博客

10-13

7138

单色背景可以不使用opacity属性，而是使用rgba函数 ex： &lt;div style="background-color:rgba(0,0,0,0.5)"&gt;背景是透明度0.5的黑色，文字不透明&lt;/div&gt; 图片做背景将图片跟文字设置成兄弟关系，对图片设置opacity属性，把文字设置成绝对定位，然后将其定位到图片上 &lt;div style=&amp

css 背景透明文字不透明

Young

03-13

1238

background:rgba(255, 255, 255, 0.9)!important; filter:Alpha(opacity=90); background:#fff; /*　使用IE专属滤镜实现IE背景透明*/ //设计盒子的最小宽度：（在内容不超过盒子的时候，盒子最小宽度不变，内容超过盒子的时候，盒子会自动撑高） width:auto !important; min-wi

css 背景透明，文字不透明

dwc2011的专栏

09-09

760

css 背景透明、文字不透明实现代码关键点：1. 在显示文字标签兄弟节点上加一个块级元素 div 用于设置背景为透明；2. div 和 ul 需要绝对定位，position 设置为 absolute。代码：背景透明，文字不透明 html, body{ width: 95%; height: 95%

css容器背景透明，内部文字内容不透明

Dumplingsoul的博客

06-12

1145

设置透明背景文字不透明，可采用的属性有rgba和IE的专属滤镜filter:Alpha，其兼容性如下图所示：针对IE6、7、8浏览器，我们可以采用fiter:Alpha，针对标准浏览器我们采用rgba，那么问题来了，IE9浏览器2个属性都支持，一起使用会重复降低不透明度... 那么，如何只对IE6、7、8使用fiter:Alpha如何实现呢？方法如下： /* 只支持IE6、7、8 *...

css设置hover时改变盒子背景图片的透明度，但不改变盒子文字的透明度

WanweI897的博客

01-24

2516

之前看到别人有用after伪元素来给图片添加透明度的写法，没有与hover相关联，于是我重新写了一下。用这种方法我们就可以用一张图片实现两种状态，减少资源的请求。 <style> div{ position: relative; width: 100px; height: 25px; cursor: pointer; } div::after { position: absolute; content

CSS代码实现背景透明而文字不透明

04-30

总的来说，实现CSS背景透明而文字不透明的方法有多种，关键在于理解各种CSS属性和技巧的兼容性，以及如何根据浏览器特性选择合适的方法。通过灵活运用 rgba()、opacity、filter 和渐变等工具，我们可以创建出既美观...

设置背景透明时里面内容内容模糊（已解决）

feizhong_web的博客

05-01

3032

我们通常会遇到这种问题，特别是对于我这种前端小白，在导航栏鼠标放上去的时候，设置背景透明，结果里面的文字也变暗了，这是因为子元素的文字继承了父元素的属性了，那怎么办，用伪类设同级元素就好。先贴代码，我的html<div class="head"> <div class="width-keep"> <div class="logo">&lt

背景渐变透明，文字不透明

qq_43803757的博客

12-01

521

背景渐变透明，文字不透明

CSS实现背景图片透明文字不透明效果的两种方法

热门推荐

ymz641的专栏

04-11

1万+

网页设计中经常要在背景图上放一些文字介绍，这就需要背景图片能有透明效果以便突出显示文字信息，经多方查阅，终于找到了2种有趣的方法。

背景颜色的不透明度，但不是文本[重复]

asdfgh0077的博客

05-29

253

This question already has an answer here: 这个问题在这里已有答案： How do I give text or an image a tra

css设置背景半透明，文字不透明效果

chili_fan的博客

06-21

5166

设置背景半透明，文字不透明效果一、常见的错误做法最常见的做法就是： 1.设置元素的opacity,这种设置出来的效果就是内容与背景都是半透明的，严重影响视觉效果。 2.设置background-color:rgba(),这种方式只能设置背景颜色的透明度。二、正确做法有两种方法，原理相同：都是要增加一个新盒子，定位到它的上面去。 1.利用伪元素::before,我们通过给伪元素添加透明背景并且定位到元素中。 .demo { width: 300px;

css实现背景透明，文字不透明的两种方法

全栈开发

03-25

1178

兼容各浏览器且效果一致。设置元素的透明度： -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明例如： <div><p>不透明</p></div> div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;width:500p

解决IE7&IE8 png 透明度的问题以及文字透明模糊

robin xiong的专栏

09-17

5579

在学习dojo的dom-style.js中遇到了设置opacity的问题，

使用opacity后子元素模糊的问题

fdyputi的博客

04-13

409

百度上很多都是通过ragb解决，但是我设置后样式达不到想要的效果，最后通过用伪类元素绝对定位设置透明度后达到设计图效果。解决方案：使用伪类元素设置opacity。

css3缩放字体后模糊的两种解决方案

qq_34297991的博客

07-24

5865

第一种：改变元素的宽和高，只有是偶数的时候才不会模糊 width: 200px; height: 200px; 第二种：如果元素是auto或者未定义宽和高的 transform:perspective(1px) scale(0.8);

CSS实现背景透明，文字不透明，兼容所有浏览器

zoey的专栏

05-04

648

出处：http://www.cnblogs.com/PeunZhang/p/4089894.html 背景透明，文字不透明 *{ padding: 0; margin: 0; } body{ padding: 50px; background: url(img/bg.png) 0 0 repeat; } .demo{ padding: 25px; b

css 对div设置opacity，影响文字透明度的解决办法

书中自有妍如玉的博客

11-21

2046

背景颜色没有问题，但是第一种文字颜色明显受到了。的方式实现才是最合理的。

CSS3实现透明背景与不透明文字效果

总结来说，通过CSS3的`opacity`属性和单独控制文本颜色，我们可以创建出背景透明、文字不透明的视觉效果。这种方法在设计中特别有用，例如在图片上添加半透明标题或注释，既保留了背景的视觉吸引力，又确保了文字的...