成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS半透明效果的屬性和場景

NoraXie / 2413人閱讀

摘要：在中與半透明效果相關(guān)的屬性有兩個和。屬性的值規(guī)定透明度。以及更早的版本支持替代的屬性。接下來通過場景來描述半透明效果的實現(xiàn)。圖片出現(xiàn)半透明效果，如果將文字設置為白色，文字的半透明效果會很小。

在CSS中與半透明效果相關(guān)的屬性有兩個：opacity和rgba。
opacity屬性的值規(guī)定透明度。從 0.0 （完全透明）到 1.0（完全不透明）。設置opacity元素的所有后代元素會隨著一起具有透明性，一般用于調(diào)整圖片或者模塊的整體不透明度。IE8 以及更早的版本支持替代的 filter 屬性。例如：filter:Alpha(opacity=50)。
rgba用于設置顏色的透明度，參數(shù)是rgba(red, green, blue, alpha) alpha的取值從 0（完全透明） 到 1（完全不透明），如rgba(255,255,255,0.8)。
接下來通過場景來描述半透明效果的實現(xiàn)。

1.鼠標懸浮在圖片上，圖片變半透明。做法是給圖片添加一個偽類，修改opacity

.image:hover{
    opacity:0.5;
}

2.圖片下部分是半透明的盒子，盒子內(nèi)有描述性的文字。


    
小指頭



.rgba{
    position:relative;
    width: 300px;
    height: 200px;
    margin: 20px;
    color:rgb(200,140,50);
    background-image: url("finger.jpg");
    text-align: center;
    cursor:pointer;
}
.bottom{
    position:absolute;
    bottom:0;
    width:100%;
    height:30px;
    line-height:30px;
    background-color: rgba(200,200,200,0.4);  //設置顏色的半透明效果
}

3.圖片下部有文字，鼠標懸浮在圖片上，圖片變模糊，文字不受影響。外面一個盒子，里面有兩個盒子，分別放圖片和文字，圖片的下外邊距為負值，文字就蓋在圖片上。圖片和文字不在同一個盒子內(nèi)，所以改變圖片的opacity不會影響文字。


    

    
小指頭



.image1{
    position:relative;
    width: 300px;
    height: 200px;
    margin-bottom: -20px;
    color:rgb(200,140,50);
    background-image: url("finger.jpg");
    text-align: center;
    cursor:pointer;
}
.image1:hover{
    opacity:0.6;
}
.text1{
    display:block;
    position:absolute;
    bottom:0;
    width:300px;
    height: 20px;
    color:red;
    text-align: center;
    cursor:pointer;
}

4.鼠標懸浮在圖片上，圖片上出現(xiàn)垂直水平居中的文字，文字是通過偽元素添加的。圖片出現(xiàn)半透明效果，如果將文字設置為白色，文字的半透明效果會很小。它的好處就是只需要寫一個div。


.image2{
    position:relative;
    width: 300px;
    height: 200px;
    margin:20px;
    text-align: center;
    background-image: url("finger.jpg");
    cursor:pointer;
}
.image2:hover{
    opacity:0.8;
}
.image2:hover:after{
    content:"小指頭";
    display:inline-block;
    font-size:25px;
    height:200px;
    line-height:200px;
    color:#fff;
}

5.電商網(wǎng)站上（如天貓）和新聞網(wǎng)站上（如好奇心研究所）上有需要出現(xiàn)半透明效果的地方。大多數(shù)是采用如下兩種結(jié)構(gòu)：


    
    
這是一些文字


.href{
    display:inline-block;
    width:250px;
    height:400px;
    margin:20px;
    text-decoration: none;
    color:#000;
}

用a標簽包裹著圖片標簽和存放文字的盒子，此時的a標簽表現(xiàn)為塊級元素，a標簽的寬度和高度均大于圖片的寬度和高度。當鼠標懸浮到a標簽上，a標簽內(nèi)的圖片會加上半透明效果，筆者并未找到實現(xiàn)這樣效果的css，猜想可能是由JS實現(xiàn)，若筆者猜想有誤，還請觀者指正。
或者是這樣的結(jié)構(gòu)：

在父盒子里面放兩個絕對定位的子盒子，一個放圖片，一個放文字，放文字的盒子是個表現(xiàn)為塊狀元素的a標簽，將背景色設置為了半透明顏色，筆者猜想是父盒子響應了鼠標懸浮事件，然后修改a標簽的visibility屬性。

一個父盒子的opacity會影響子盒子，opacity也大多是用于圖片上，而rgba是用于顏色上。而opacity這個屬性還具有更有意思的地方，那就是創(chuàng)建層疊上下文，這個筆者會在下篇文章《細說opacity和層疊上下文》中分析。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116614.html

相關(guān)文章

  • 聊聊網(wǎng)頁中的圖片

    摘要：使用的場景多為頁面內(nèi)容的圖片，較大的頭圖，顏色過多的圖片。就是頁面中的背景，并不是內(nèi)容，修飾作用。 warn: 這是一篇沒有一張圖片的講圖片的文章 1. 圖片格式 通常在網(wǎng)頁中使用的圖片有三種格式，jpg，png和gif。jpg是有損壓縮格式，就算你在ps里用100%質(zhì)量保存，保存多次會產(chǎn)生質(zhì)量損失，而png和gif則不會。因此如果開發(fā)者相對圖片進行微處理，改動jpg不是明智的選擇。p...

    Meathill 評論0 收藏0

  • 聊聊網(wǎng)頁中的圖片

    摘要：使用的場景多為頁面內(nèi)容的圖片，較大的頭圖，顏色過多的圖片。就是頁面中的背景，并不是內(nèi)容，修飾作用。 warn: 這是一篇沒有一張圖片的講圖片的文章 1. 圖片格式 通常在網(wǎng)頁中使用的圖片有三種格式，jpg，png和gif。jpg是有損壓縮格式，就算你在ps里用100%質(zhì)量保存，保存多次會產(chǎn)生質(zhì)量損失，而png和gif則不會。因此如果開發(fā)者相對圖片進行微處理，改動jpg不是明智的選擇。p...

    Vultr 評論0 收藏0

  • CSS背景與邊框

    摘要：背景與邊框半透明邊框背景知識顏色在里我們可以使用和兩種色彩模式，二者均可以用來在設置顏色的同時指定其它透明度。解決方案需要知道的是，在默認情況下，背景會延伸到邊框所在區(qū)域的下層。 title: 背景與邊框 date: 2016-10-16 tags: CSS Secrets 0x00 半透明邊框 背景知識 RGBA/HSLA 顏色 在CSS3里我們可以使用RGBA和...

    wanghui 評論0 收藏0

  • CSS揭秘之《制作半透明邊框》

    摘要：默認狀態(tài)下，背景會延伸到邊框的區(qū)域下層可以通過屬性來調(diào)整上述默認行為所帶來的不便這個屬性的初始值是，意味著背景會被元素的邊框的外沿框裁切掉實現(xiàn)半透明邊框代碼如下通過設置通道然后具體效果見鏈接 1、默認狀態(tài)下，背景會延伸到邊框的區(qū)域下層2、可以通過 background-clip 屬性來調(diào)整上述默認行為所帶來的不便；這個屬性的初始值是 border-box， 意味著背景會被元素的 bor...

    Berwin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<