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

作者: CoderZb | 来源:发表于2020-04-24 14:59 被阅读0次

css 对div设置opacity，影响文字透明度的解决办法
rgba 和 opacity 中的透明度的区别
背景图片设置透明度而不改变内容
2018-07-19 小结
17.1.25 css透明度和鼠标手势
opacity
CSS透明度之rgba和opacity的区别
HTML透明度样式filter和opacity
input[type=file] 样式美化，input上传按钮美
零基础学习web开发技术总结分享

如下图所示，左图采用的是opacity的方式控制背景颜色的，右图采用的是rgba的方式控制背景颜色的。
虽说是背景颜色没有问题，但是左图的文字颜色明显受到了opacity的影响,因此应采用rgba的方式实现才是最合理的。

左图的写法

.scroll_page {
  background-color: #000000;
   opacity: 0.3;
}

右图的写法

.scroll_page {
    background:rgba(0, 0, 0, 0.3);
}

image.png

css 对div设置opacity，影响文字透明度的解决办法
如下图所示，左图采用的是opacity的方式控制背景颜色的，右图采用的是rgba的方式控制背景颜色的。虽说是背景颜...
rgba 和 opacity 中的透明度的区别
当单独设置透明度opacity为0.5时，透明度也会被div2中的文字继承，所以可以从文字中看到蓝色而设置rgb...
背景图片设置透明度而不改变内容
想到透明度自然就想到了css的opacity: 0.5;但是如果就这样设置的话，会导致整个div所有内容都变成透明...
2018-07-19 小结
1、CSS3中属性的透明度是opacity 2、让div垂直居中： position: absolute; ...
17.1.25 css透明度和鼠标手势
1.css设置透明度 filter:alpha(opacity=50); /*IE滤镜，透明度50%*/ -moz...
opacity
Opacity: Css3 opacity透明度设置所有主流浏览器都支持opacity属性。. IE8和早期版本...
CSS透明度之rgba和opacity的区别
在CSS样式中，设置透明度的方式有两种。其一，opacity；其二rgba()。opacity和rgba()在一定...
HTML透明度样式filter和opacity
HTML透明度样式filter和opacity opacity属性 opacity是CSS3的属性, 能够元...
input[type=file] 样式美化，input上传按钮美
input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实...
零基础学习web开发技术总结分享
1、opacity与RGBA 对元素进行透明度的设置时，经常用到的有opacity与background -col...