最近遇到一个需求，要在图片上显示带有半透明背景的文字，效果如下图所示： 看到这个需求之后，第一反应是使用CSS3中的opacity设置元素的透明度。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=" ...
分类：
Web程序 时间：
2020-06-24 00:10:29
阅读次数：
97
实现思路： 给button 元素设置了透明，将button里面的文字放到span标签，设置一个颜色，文字就不会透明 ...
分类：
Web程序 时间：
2019-07-15 19:55:29
阅读次数：
143
一、背景透明，文字不透明 问题：当鼠标悬浮到列表上时，背景颜色为#fff，背景透明度为0.5 一开始写法： 最终结果：背景颜色透明，但字体也变透明了，不符合要求。 正确写法： 二、计算属性calc() 需要注意事项： 1、表达式中有“+”和“-”时，其前后必须要有空格，否则表达式错误。 2、表达式中 ...
分类：
其他好文 时间：
2019-06-21 13:03:21
阅读次数：
107
最近遇到一个需求，如下图，input框要有透明效果 首先想到的方法是CSS3的 opacity属性，但事实证明我想的太简单了 这个属性虽然让input框有透明效果，同时文字也会有透明效果，导致文字不清晰，如下图 于是我开始思考其它方式，最后想到了通过透明背景图来实现 背景图虽然能够解决问题，但会造成 ...
分类：
Web程序 时间：
2018-11-15 01:38:44
阅读次数：
435
实现透明的css方法通常有以下3种方式，以下是不透明度都为80%的写法 css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8 css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255,0.8 ...
分类：
Web程序 时间：
2018-11-10 15:20:06
阅读次数：
139
最近遇到一个需求，要在图片上显示带有半透明背景的文字，效果如下图所示： 看到这个需求之后，第一反应是使用CSS3中的opacity设置元素的透明度。 效果如下： 这样貌似也满足了需求，不过并不完美，设置opacity之后，整个元素都半透明了，造成文字显得模糊，这样的解决方式并不可取。 其实实现透明的 ...
分类：
Web程序 时间：
2018-06-26 12:30:11
阅读次数：
183
一、文本新增样式 opacity 不透明度 效果 rgba透明度（选中的就透明）一般应用在背景透明，文字不透明。是rgb的一个拓展，a的值在（0,1）之间，就是针对前面的颜色的一个透明度/不透明度的描述. text-shadow:文字阴影，可以多层，阴影值之间可以用逗号隔开。前两个设置是偏移量，后面 ...
分类：
Web程序 时间：
2018-06-06 22:11:53
阅读次数：
548
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0 !important; /*实现FF背景透明，文字不透明*/ filter: Alpha(opacity=80); background: #0a0a0a; /*实现IE背景透明*/ ...
分类：
Web程序 时间：
2017-07-26 01:46:54
阅读次数：
191
于是呢，熬夜加班做了11.11的活动，在PC端遇到了透明背景和透明图片的问题，其实以前也遇到过，只是没有总结起来，就忘记了，这次又撞墙了，必须记录下来，一来给自己做个小总结，提个醒，最近变懒了，再不努力就要倒挂了；二来是因为在网络上并没有完整的解决方案，希望可以帮助到遇到此类问题的朋友，今天主要讲解 ...
分类：
Web程序 时间：
2017-07-25 11:50:35
阅读次数：
193
.demo{ padding: 25px; background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */ } .demo p{ color: #FFFFFF; } @media \0screen\,scree... ...
分类：
其他好文 时间：
2017-07-22 18:18:57
阅读次数：
123
