亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

css background-position和background-size以及clip屬性

wua_wua2012 / 1130人閱讀

摘要：今天聊一聊背景屬性的和以及三個屬性。為默認(rèn)值這個屬性，是用來控制背景圖片尺寸的。使用百分比與使用單位類似，是以父元素為基準(zhǔn)。關(guān)鍵詞顧名思義，這個屬性會讓背景圖片完全覆蓋元素空間。

今天聊一聊css背景屬性的background-position和background-size以及clip三個屬性。

background-position：(0%,0%)為默認(rèn)值
這個屬性，看它字面意思就知道啦，用來定位背景顯示的位置。既然是定位，自然而然我們就想到了top和left，
對比于position屬性，在這里我們可以用以下方式來使用background-position：

1、直接使用定位關(guān)鍵詞如"right","center","top","left"等，形如background-
position:center left;如果只設(shè)置一個值，另一個值默認(rèn)為center;

2、使用百分比，形如background-position:10% 20%;第一個值為水平值，第二個為垂直方向值如果只設(shè)置
 一個值，另一個值默認(rèn)為50%；

3、使用px，em等其他css單位，與百分比使用類似。




background-size:auto為默認(rèn)值
這個屬性，是用來控制背景圖片尺寸的。它也有幾種用法：

1、直接使用css單位如px,rem等，形如：background-size:10px 20px;第一個數(shù)值用來確定寬度，第二個
值用來確定高度。

2、使用百分比與使用單位類似，是以父元素為基準(zhǔn)。

3、關(guān)鍵詞cover,background-size:cover;顧名思義，這個屬性會讓背景圖片完全覆蓋元素空間。我們可以
這樣理解，將一張圖片等比例放大，直到這張圖片能夠完全將元素空間完全覆蓋時，就是此時cover定義的背景
尺寸了。

4、關(guān)鍵詞contain，background-size:contain;contain屬性與cover不同，仍然是等比例拉大背景圖片
但是，contain屬性是在圖片的寬度或者高度其中之一和元素的寬度和高度一致時，此時的尺寸就是背景的尺寸
也就是說，圖片會被放大到容器能夠完全顯示它的最大尺寸。




最后，我們來看一個用clip屬性搭配js腳本實現(xiàn)的效果：


我們看到圖片中的導(dǎo)航條，文化二字被“切割”了，一部分是黑色，一部分是白色。這是怎么做到的呢？訣竅在于
使用clip屬性，clip用來裁剪絕對定位元素，被切掉的部分類似于overflow：hidden，也就是說在頁面上是
看不見的。這個效果，其實用了兩個一樣的導(dǎo)航重疊在一起，然后通過js腳本根據(jù)滾動來實時設(shè)置clip屬性的值
nav1裁剪掉下部分，nav2裁剪掉上部分，這樣看來就實現(xiàn)了圖片的效果。

由于文字描述比較難懂，這里貼出有圖中效果的某網(wǎng)址，供各位參考～～
點擊這里：http://www.sketchin.ch/en/

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

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

相關(guān)文章

  • 關(guān)于CSS中的背景屬性background簡述

    摘要：屬性控制背景圖片在被屬性改變了大小及被屬性定位后如何平鋪?？捎糜诖藢傩缘年P(guān)鍵字為和。對于長度和百分比，我們也可以指定沿軸和軸的位置。屬性指定背景圖片應(yīng)根據(jù)盒模型的哪個區(qū)域進(jìn)行定位。最后，屬性是其他背景相關(guān)屬性的簡寫。 像我之前提到的那樣，文檔樹中的每個元素只是一個矩形盒子。這些盒子都有一個背景層，背景層可以是完全透明或者其它顏色，也可以是一張圖片。此背景層由8個CSS屬性（加上1個簡寫...

    tomorrowwu 評論0 收藏0

  • 關(guān)于CSS中的背景屬性background簡述

    摘要：屬性控制背景圖片在被屬性改變了大小及被屬性定位后如何平鋪?？捎糜诖藢傩缘年P(guān)鍵字為和。對于長度和百分比，我們也可以指定沿軸和軸的位置。屬性指定背景圖片應(yīng)根據(jù)盒模型的哪個區(qū)域進(jìn)行定位。最后，屬性是其他背景相關(guān)屬性的簡寫。 像我之前提到的那樣，文檔樹中的每個元素只是一個矩形盒子。這些盒子都有一個背景層，背景層可以是完全透明或者其它顏色，也可以是一張圖片。此背景層由8個CSS屬性（加上1個簡寫...

    tianren124 評論0 收藏0

  • [實踐總結(jié)]純css實現(xiàn)動態(tài)邊框

    摘要：另外一種實現(xiàn)思路是添加四個來分別實現(xiàn)上下左右的邊框效果，雖然可行，但是要添加四個額外元素，有點兒得不償失的感覺。背景 這幾天工作中遇到一個交互需求，要求實現(xiàn)一個效果，當(dāng)鼠標(biāo)移入一個元素的時候，元素出現(xiàn)一個動態(tài)的邊框，如圖： showImg(https://user-gold-cdn.xitu.io/2019/5/15/16aba8a2ccb58e4e);動態(tài)邊框 思路 看到這個效果，我首先想...

    BlackHole1 評論0 收藏0

  • 前端面試之CSS3新特性

    摘要：和這三個特性是新增的和動畫相關(guān)的特性。使用方式如下和變換類型可以有各種變換類型，即屬性值定義不進(jìn)行轉(zhuǎn)換。設(shè)置列之間的寬度樣式和顏色規(guī)則和和用戶界面中，新的用戶界面特性包括重設(shè)元素尺寸盒尺寸以及輪廓等。 除了html5的新特性，CSS3的新特性也是面試中經(jīng)常被問到的。 選擇器 CSS3中新添加了很多選擇器，解決了很多之前需要用javascript才能解決的布局問題。 element1~...

    glumes 評論0 收藏0

  • 《css揭秘》讀書筆記

    摘要：但是根據(jù)本司機兩年的開發(fā)經(jīng)驗來看，在實際開發(fā)中很少來使用這個單位。由于基本都是一些實用性的技巧，我就不一一列舉了，建議自讀。很好很實用的一本書。 第一章 引言 css編碼技巧 在引言中，作者提到使用em與inherit來實現(xiàn)css代碼的簡潔與可維護(hù)性。但是根據(jù)本司機兩年的開發(fā)經(jīng)驗來看，在實際開發(fā)中很少來使用em這個單位。如何用以及何時去使用，還是要根據(jù)實際開發(fā)需求來定吧，畢竟這兩個屬性...

    xiguadada 評論0 收藏0

發(fā)表評論

0條評論

wua_wua2012

男|高級講師

TA的文章

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