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屬性樣式”，找到了這麼幾個好辦法：