溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關css怎么利用transparent屬性設置透明度的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
那么，大家是不是會問csstransparent屬性是什么，有什么用？
其實，csstransparent是一種全透明黑色(black)的速記法，即一個類似rgba(0,0,0,0)這樣的值；是用來指定全透明色彩的。
舉個例子：
我們在css中定義：background:transparent，意思就代表設置背景為透明。
但，實際上background默認的顏色就是透明的屬性，所以寫和不寫都是一樣的。那么為什么有時候需要設置background為transparent？transparent一般會使用在什么場景下：
當果一個元素覆蓋在另外一個元素之上，而你想顯示下面的元素，這時你就需要把上面這個元素的background設置為transparent
transparent屬性在不同css版本下的使用：
在css1中，transparent被用來作為background-color的一個參數值，用于表示背景透明。
在css2中，border-color也開始接受transparent作為參數值，《OpeneBook(tm)PublicationStructure1.0.1》[OEB101]延伸到color也接受transparent作為參數值。
在css3中，transparent被延伸到任何一個有color值的屬性上。
我們來看看兼容性：
1.jpg
#1：border-color不接受該值；
#2：color不接受該值；
transparent屬性繪制各種三角形（與border屬性一起使用）
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.demo{
margin:40pxauto;
width:800px;
/*background-color:#f0ac6b;*/
}
.demo*{
float:left;
margin:20px30px;
width:0px;
height:0px;
}
.t1{
/*background-color:#f0ac6b;*/
border-bottom:40pxsolidred;
border-right:20pxsolidtransparent;
border-left:20pxsolidtransparent;
}
.t2{
/*background-color:#f0ac6b;*/
border-bottom:40pxsolidtransparent;
border-right:40pxsolidred;
/*border-left:20pxsolidtransparent;*/
}
.t3{
border-top:40pxsolidred;
border-right:20pxsolidtransparent;
border-left:20pxsolidtransparent;
}
.t4{
border-top:40pxsolidtransparent;
border-left:40pxsolidred;
}
.t5{
border-top:40pxsolidred;
border-right:40pxsolidtransparent;
}
.t6{
border-left:40pxsolidtransparent;
border-bottom:40pxsolidred;
}
.t7{
border-left:40pxsolidred;
border-bottom:20pxsolidtransparent;
border-top:20pxsolidtransparent;
}
.t8{
border-right:40pxsolidred;
border-bottom:20pxsolidtransparent;
border-top:20pxsolidtransparent;
}
</style>
</head>
<body>
<divclass="demo">
<divclass="t1"></div>
<divclass="t3"></div>
<divclass="t2"></div>
<divclass="t4"></div>
<divclass="t5"></div>
<divclass="t6"></div>
<divclass="t7"></div>
<divclass="t8"></div>
</div>
</body>
</html>
感謝各位的閱讀！關于“css怎么利用transparent屬性設置透明度”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
