這篇文章給大家分享的是有關css怎么利用transparent屬性設置透明度的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)公司堅持“要么做到,要么別承諾”的工作理念,服務領域包括:網(wǎng)站建設、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務,滿足客戶于互聯(lián)網(wǎng)時代的肥鄉(xiāng)網(wǎng)站設計、移動媒體設計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴!
那么,大家是不是會問csstransparent屬性是什么,有什么用?
其實,csstransparent是一種全透明黑色(black)的速記法,即一個類似rgba(0,0,0,0)這樣的值;是用來指定全透明色彩的。
舉個例子:
我們在css中定義:background:transparent,意思就代表設置背景為透明。
但,實際上background默認的顏色就是透明的屬性,所以寫和不寫都是一樣的。那么為什么有時候需要設置background為transparent?transparent一般會使用在什么場景下:
當果一個元素覆蓋在另外一個元素之上,而你想顯示下面的元素,這時你就需要把上面這個元素的background設置為transparent
transparent屬性在不同css版本下的使用:
在css1中,transparent被用來作為background-color的一個參數(shù)值,用于表示背景透明。
在css2中,border-color也開始接受transparent作為參數(shù)值,《OpeneBook(tm)PublicationStructure1.0.1》[OEB101]延伸到color也接受transparent作為參數(shù)值。
在css3中,transparent被延伸到任何一個有color值的屬性上。
我們來看看兼容性:
1.jpg
#1:border-color不接受該值;
#2:color不接受該值;
transparent屬性繪制各種三角形(與border屬性一起使用)
*{
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;
}
感謝各位的閱讀!關于“css怎么利用transparent屬性設置透明度”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!