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

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

首先说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,以上就是今天遇到的问题及解决方法。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页