這篇文章主要介紹“CSS中的postion和opacity用法和應(yīng)用是什么”，有一些人在CSS中的postion和opacity用法和應(yīng)用是什么的問題上存在疑惑，接下來(lái)小編就給大家來(lái)介紹一下相關(guān)的內(nèi)容，希望對(duì)大家解答有幫助，有這個(gè)方面學(xué)習(xí)需要的朋友就繼續(xù)往下看吧。

postion

background-postion我們常用于元素的定位，而且可以接收好幾個(gè)值：

1、接收一個(gè)值

這個(gè)值可以為百分比、數(shù)值或者關(guān)鍵字，另一個(gè)值一定是center

// 單個(gè)屬性值
background-postion: 33px;
background-postion: center;
background-postion: left;
background-postion: bottom;
background-postion: right;
background-postion: top;
background-postion: 30%;
background-postion: right;
background-postion: right;
//依次等價(jià)于
background-postion: 33px center;
background-postion: center center;
background-postion: left center;
background-postion: bottom center;
background-postion: right center;
background-postion: top center;
background-postion: 30% center;
background-postion: right center;
background-postion: right center;

2、接收兩個(gè)值

兩個(gè)值都是數(shù)值或者百分比值時(shí)，第一個(gè)值表示水平方向，另一個(gè)值表示垂直方向，如果我們把兩個(gè)值都是為??background-position: 0% 0%??，那么就等于這個(gè)寫法??background-position：left top??;

當(dāng)兩個(gè)值都是關(guān)鍵字時(shí)，top和bottom表示垂直方向，left和right表示水平方向，所以我們寫成??background-position: top right??和??background-position: right top??效果是一樣的，但是我們不能寫成??background-position: right left??和??background-position: top bottom??,如果這樣寫，是無(wú)效的。

當(dāng)兩個(gè)字一個(gè)是數(shù)值或百分比值另一個(gè)是關(guān)鍵字時(shí)，如果數(shù)值或百分比值是第一個(gè)值，則表示水平方向，第二個(gè)值表示垂直方向。如果數(shù)值或百分比值是第二個(gè)值，就表示垂直方向，那另一個(gè)值就表示水平方向，所以如果我們寫成??background-position: 44px left??是無(wú)效的。

3、接收3個(gè)值或4個(gè)值

數(shù)值和百分比值表示的是偏移量，第一個(gè)值一定是關(guān)鍵字，用來(lái)表示從哪個(gè)方向開始偏移的，如果是3個(gè)值，則缺少的偏移量為0,所以我們寫成??background-position: 44px left top??是無(wú)效的。

background-postion接收多個(gè)值在瀏覽器中已經(jīng)兼容，我們可以用background-position來(lái)代替calc()函數(shù)，從而去實(shí)現(xiàn)左方向或右方向的定位。

cursor

cursor中我們很少用到抓取和縮放效果，??cursor:zoom-out??用于放大，??cursor:zoom-in??用于縮小，如果想要在桌面上查看放大或者縮小，加入對(duì)應(yīng)的屬性就行。

??cursor: grabbing??在電腦頁(yè)面顯示的是一個(gè)握住的手形，??cursor: grab??在電腦頁(yè)面顯示的是一個(gè)張開的手形，在項(xiàng)目中使用我們可以加入前綴，防止不顯示的問題。

如果我們想要在IE中去使用，我們可以加入move屬性值。

// 用move屬性值來(lái)代替grab
.wrapper {
  cursor: move;
  cursor: grab;
}

opacity

opacity可以使元素透明或者半透明，屬性值范圍0-1之間，opcacity默認(rèn)值是1，而且我們還可以利用opacity將偽元素進(jìn)行顯示或者隱藏。

opacity計(jì)算規(guī)則

當(dāng)我們給父元素和子元素同時(shí)設(shè)置了半透明效果，因?yàn)閛pacity屬性沒有繼承性，所以半透明效果會(huì)疊加在一起，比如我們給父元素和子元素都設(shè)置為opacity：0.4，則此時(shí)的透明度就是0.16，是兩個(gè)opacity的乘積。

// 父元素的透明度
opacity-father {
    opacity: 0.4
}
// 子元素的透明度
opacity-son {
    opacity: 0.4
}

opacity的邊界

因?yàn)閛pacity的范圍是0-1，如果我們?cè)O(shè)置的值不在這個(gè)范圍之內(nèi)，那么系統(tǒng)會(huì)按邊界值去顯示。

.wrapper {
    // 透明值設(shè)置為-11，但是系統(tǒng)會(huì)解析成0
    opacity：-11;
    // 透明值設(shè)置為88， 系統(tǒng)會(huì)解析成1
    opacity：88
}

其中RGBA和HSLA都具有opacity這種邊界值的特性。

border-radius

平時(shí)工作中，我們最常用到的就是像素和百分比去設(shè)置border-radius。

border-radius: 10px;
// 常用來(lái)設(shè)置圓形
border-radius: 50%;

border-radius是一種縮寫形式，而它的全寫是由四部分組成的：??border-top-left-radius??, ??border-top-right-radius??, ??border-bottom-right-radius??, ??border-bottom-left-radius??四部分組成。

當(dāng)只有1個(gè)值時(shí)，這個(gè)值的效果會(huì)作用四個(gè)角：??border-radius: 5px??

當(dāng)有2個(gè)值時(shí)，第一個(gè)值作用于左上角和右下角，第二個(gè)值作用于右上角和左下角: ??border-radius：6px 10%??

當(dāng)有3個(gè)值時(shí)，第一個(gè)值作用于左上角，第二個(gè)值作用于右下角和左下角，第三個(gè)值作用于右下角: ??border-radius: 3px 5% 6px??

當(dāng)有4個(gè)值時(shí)，第一個(gè)值作用于左上角，第二個(gè)值作用于右上角，第三個(gè)值作用于右下角，第四個(gè)值作用于左下角: ??border-radius: 6px 7% 8px 4px??

還有一些等價(jià)的縮寫形式：

border-top-left-radius: 5px;
// 等價(jià)于
border-radius: 5px 5px;

border-radius常用的一些知識(shí)： border-radius的圓角以外的區(qū)域無(wú)法響應(yīng)點(diǎn)擊事件。不支持負(fù)值。當(dāng)我們給父元素設(shè)置了border-radius，子元素是直角效果，我們可以設(shè)置??overflow：hidden??使子元素在視覺上看起來(lái)是一個(gè)圓角。當(dāng)我們將border-radius應(yīng)用于??display:table??或者??display: inline-table??上時(shí)，我們必須讓表格元素的border-collapse屬性值為separate，border-collapse的默認(rèn)值是??separate??，如果border-collapse: collapse，不會(huì)顯示圓角效果。

我們還可以利用border-radius設(shè)置一些不規(guī)則的圓角效果:

.wrapper {
    border-radius: 69% 29% 29% 69% / 59% 39% 59% 39%;
}

一般帶圓弧的圖形效果都可以使用border-radius來(lái)實(shí)現(xiàn)出來(lái)，我們可以繪制角標(biāo)：

border-bottom-right-radius: 100%;

關(guān)于“CSS中的postion和opacity用法和應(yīng)用是什么”就介紹到這了，如果大家覺得不錯(cuò)可以參考了解看看，如果想要了解更多，歡迎關(guān)注群英網(wǎng)絡(luò)，小編每天都會(huì)為大家更新不同的知識(shí)。

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：[email protected]進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，查實(shí)之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。

猜你喜歡

• 使用HTML5怎樣制作刻度尺，步驟是什么

  這篇文章主要介紹了html5借用repeating-linear-gradient實(shí)現(xiàn)一把刻度尺，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

• CSS中rem屬性怎樣設(shè)置和使用，有哪些要注意

  在使用CSS3中rem屬性過程中，我們經(jīng)常拿來(lái)設(shè)置字體大小，或者做頁(yè)面布局。那么，這些屬性如何應(yīng)用設(shè)置比較好呢？下文有實(shí)例供大家參考，對(duì)大家了解操作過程或相關(guān)知識(shí)有一定的幫助，而且實(shí)用性強(qiáng)，希望這篇文章能幫助大家，下面我們一起來(lái)了解看看吧。

• webpack如何加載css文件，要配置什么

  這篇文章主要介紹了webpack加載css文件及其配置方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

• AmazeUI中如何實(shí)現(xiàn)一個(gè)基本面板，代碼是什么

  這篇文章主要介紹了AmazeUI 面板的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

• CSS3中用clip怎么寫圓環(huán)進(jìn)度條，思路和方法是什么

  這篇文章主要介紹了css3 clip實(shí)現(xiàn)圓環(huán)進(jìn)度條的示例代碼的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧