rgba和opacity的区别、修改表单中的placeholder属性样式

来源：互联网发布：七日杀低配优化补丁编辑：程序博客网时间：2024/06/07 12:51

最近在写代码的时候频繁遇到这个问题的困扰，今天一次性将我对这两者区别的认知总结在这里：

首先说opacity,这是一个css3属性，所以理所应当就存在兼容性问题：
这里写图片描述

并且需要注意的是，设置opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整体不透明度

举个例子说，

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">div{width:500px; height:200px; background-color:red; padding:20px; opacity:0.5;}p{font-size:24px; color:#fff; text-align:center;}</style></head><body>    <div>        <p>元素内的文字也跟着拥有透明属性</p>    </div></body></html>

这里写图片描述

因此，利用opacity属性不能实现元素透明文字不透明的效果。并且，在IE浏览器中不能使用该属性，而是用到IE专属滤镜filter:Alpha(opacity=x)。

································································································································
接下来是rgba方法，该方法也是属于css的内容，第一件事情就是看一下兼容性：
这里写图片描述

rgba用来设计设置颜色的不透明度，一般用于调整background-color、color、box-shadow等的不透明度。它可以实现元素透明文字不透明的效果，例子如下：

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">div{width:500px; height:200px; background-color:rgba(232,234,34,0.5); padding:20px;}p{font-size:24px; color:#000; text-align:center;}</style></head><body>    <div>        <p>元素透明文字不透明哈哈哈</p>    </div></body></html>

这里写图片描述

以上就是rgba和opacity的区别。

那么又有一个新的问题来了。rgba可以实现元素透明而文字不透明，但不兼容部分IE浏览器。IE的专属滤镜可以在IE中奏效，但是又会有元素、文字都透明的问题出现···那么，如何实现元素背景透明、文字不透明且兼容所有的浏览器呢？

这个问题老师上课的时候也提到过。我的思考是，只需要在JS代码中判断一下是否为IE浏览器。如果是IE，则只能用filter:Alpha(opacity=x)方法，但是文字部分可以用定义一个不同级元素再定位的方法；非IE浏览器中可以使用rgba的方法。

顺便补充一下史上判断”是否为IE浏览器“的最简单的方法

if(-[1,]){是IE}else{不是IE}

此外，今天在上网的时候发现了一个大神用春css方法解决这个问题的办法，详细地学习一下吧

···················································································································································

最后一点，也是在今天写作业的时候遇到的一个问题。如图，这里写图片描述
在一个banner图上定义了一个div,并且div为背景透明，在这个div上又有一个表单元素，输入框里的提示内容“红酒炖牛腩”肯定是通过placeholder的属性来实现的。但是！但是这样一来，提示内容里的文字就会和div拥有一样的透明属性。检查代码发现，div的透明属性是通过opacity设置的，难怪呢。所以赶紧改成rgba的方法，然后满怀期待地刷新，还是这个样子。。。我以为是自己对透明度这块地知识认知出现的问题，赶紧上网查透明度的知识，后来确定地写了上半部分博客。最后我发现，用rgba方法后，只要让表单获取焦点往里输内容时，文字其实已经成功地实现了不透明。知识改变不了placeholder的属性罢了，所以我就又搜索了“如何修改表单中的placeholder属性样式”，找到了这么几个好办法：
这里写图片描述

我采用了第一种解决方法：
这里写图片描述

具体学习其他几种方法

ok，以上就是今天遇到的问题及解决方法。

0 0