background:#000; opacity: 0.3; filter: progid:dximagetransform.microsoft.alpha(opacity=30); } .bg-translucent{ background:rgba(0,0,0,0.5);/*前三个参数为rgb颜色,第四个参数为透明度*/ filter:progid:dximagetransform.microsoft.gradient(startcolorstr=#7f000000,endcolorstr=#7f000000);/*#7f00000...
使用说明:设置颜色的不透明度,一般用于调整background-color、color、box-shadow等的不透明度。 <!DOCTYPE html> css3的rgba *{ padding: 0; margin: 0; } body{ padding: 50px; background: url(img/bg.png) 0 0 repeat; } .demo{ padding: 25px; background-color:#000000;/* IE6和部分IE7...
在CSS中,我们可以使用rgba()函数来设置背景颜色的透明度,也可以使用opacity属性来设置元素及其内容的透明度。 1.1 rgba()函数的使用 rgba()函数是CSS3中新增的颜色数值表示方法,其中的"a"代表alpha通道,用来表示颜色的透明度。通过设置rgba()函数中的透明度数值,我们可以实现背景颜色的透明效果。例如,rgba(255, 0, 0...
透明度会相乘，例如外层透明度0.5，内层想写成不透明1，最终得到的结果是透明度0.5。正确思路：可以用position:absolute,做一上一下两个层。另外，用CSS的background-color: rgba(0,0,0,0.7);也可以实现背景半透明，单只是兼容IE9以上版本（CSS3是可以设置rgba的）。3 html代码： 1. 这里是父元素...
background:rgba(200, 54, 54, 0.5); 其中,表示半透明度的0.5前面的0是可以省掉的,直接.5也是可以的。 兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器都支持 解决IE8浏览器不支持rgba的方法: background:rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000...
background-image功能比较单一,无法设置透明度,如果直接用opacity强行设置,会导致整个盒子都变得透明。 解决办法: 1.利用线性渐变函数linear-gradient(),在里面可以设置填充图片,把颜色设置成空透明度图层,再针对图片设置透明度,即可实现透明的背景图层。 2.利用伪元素贴上一张宽高等于盒子的图片,因为是图片所以可以设置透...
兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(0,0,0, .25); filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000); 1. 2. 注意:startColorStr 和 endColorStr 的值,前两位是十六进制的透明度,后面六位是十六进制的颜色。
background-color: hsla(0, 0%, 0%, 0.5); /* 背景颜色为黑色,透明度为50% */ } 这是一个具有透明背景的div元素。 HSLA颜色值与RGBA颜色值类似,可以仅设置背景的透明度,而不会影响到内容的透明度。 四、使用背景图片实现透明效果 1. 什么是背景图片...
要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中,目前不支持Opera浏览器。
.title_div{width:200px;height:200px;line-height:30px;text-align: center;margin:0auto;background-color:rgba(220,38,38,0.2); } AI代码助手复制代码 rgba方式设置背景颜色透明度效果如下: 说明:通过rgba方式设置背景颜色透明度,可以设置背景颜色透明而文字不透明,但是这种方法的兼容性不好,不兼容ie浏览器。