【CSS3 实现背景透明，文字不透明，兼容所有浏览器】的更多相关文章

css背景透明文字不透明

测试背景透明度为0.3.文字不透明: background-color: #000; /* 一.CSS3的opacity */ opacity: 0.3; /* 兼容浏览器为:firefox,chrome,IE9+ 文字也跟着透明*/ /* 二.CSS3的rgba */ background: rgba(0, 0, 0, 0.3); /* 兼容浏览器为:firefox,chrome,IE9+ 其中IE8,IE7,IE6解析为背景全透明 文字不透明 */ /* 三.IE专属滤镜 */ filter…

CSS3实现背景透明文字不透明

最近遇到一个需求,如下图,input框要有透明效果 首先想到的方法是CSS3的 opacity属性,但事实证明我想的太简单了 这个属性虽然让input框有透明效果,同时文字和字体图标也会有透明效果,导致文字和字体图标被模糊,如下图 于是我开始思考其它方式,最后想到了通过透明背景图来实现 背景图虽然能够解决问题,但会造成空div,并且还需要设置定位 感觉把简单的事情变得复杂了,我始终认为有更简单的方法 最后终于被我找到了完美解决的方法——用CSS3的 rgba 来设置 background-col…

背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)

以背景黑色,透明度0.5举例为大家详细介绍下关于背景透明,文字不透明的最佳方法同时兼容IE,具体实现如下,感兴趣的朋友可以参考下哈希望对大家有所帮助 以背景黑色,透明度0.5举例 非IE:background:rgba(0,0,0,0.5); IE: filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); IE: filter:progid:DXImageT…

css3背景透明文字不透明

在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明,而文字保持不透明.而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜filter:Alpha来实现,但是这样写法会把文字也变为透明,因此只有在透明容器的子节点(文本节点除外)内设置position:relative才能不继承其父元素的透明滤镜,代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition…

css实现背景透明文字不透明

设置元素的透明度:  -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;w…

div半透明背景，文字不透明

background: rgba(255, 255, 255, 0.8) !important; /* IE无效,FF有效 */ background: #fff; filter: alpha(opacity=60); 在需要不透明文字的元素样式上添加样式:position:relative;…

[小技巧]兼容IE6的纯CSS背景半透明文字不透明

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> IE背景半透明 </title> <style type="text/css"> .alpha{ width: 100px; height: 100px; color: #fff; background: rgba(0, 0…

html 背景透明文字不透明

.alpha{ width: 100px; height: 100px; color: #fff; background: rgba(0, 0, 0, .3); filter: progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #50000000, endColorstr = #50000000)\9; } :root .alpha{ filter: none; /*for IE9*/ } <…

css实现背景半透明文字不透明的效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> html{ background: #6a8db1; } .aside{ background-color:rgba(244,251,251,0.47); border: 1px solid #FFFFFF; width: 200px; text-al…

使用jQuery实现文本框input定位到文字最后（兼容所有浏览器）

$.fn.setCursorPosition = function(position){ if(this.lengh == 0) return this; return $(this).setSelection(position, position); } $.fn.setSelection = function(selectionStart, selectionEnd) { if(this.lengh == 0) return this; input = this[0]; if (input.…