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

資訊專欄INFORMATION COLUMN

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

wua_wua2012 / 880人閱讀

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

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

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

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

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

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




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

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

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

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

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




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


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

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

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

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

相關(guān)文章

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

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

    tomorrowwu 評(píng)論0 收藏0

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

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

    tianren124 評(píng)論0 收藏0

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

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

    BlackHole1 評(píng)論0 收藏0

  • 前端面試之CSS3新特性

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

    glumes 評(píng)論0 收藏0

  • 《css揭秘》讀書筆記

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

    xiguadada 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

wua_wua2012

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<