background-repeat space/round屬性

姘擱『發(fā)布于2019-08-29 15:34 / 3513人閱讀

摘要：容器空間小于圖片背景圖不會(huì)產(chǎn)生縮放，會(huì)被裁切縮放背景圖至容器大小非等比例縮放上面為下圖為容器空間大于圖片在不縮放的前提下盡可能多的重復(fù)圖片充分利用容器空間，重復(fù)次之后軸方向如果剩余空間大于等于則重復(fù)第次，否則拉伸已經(jīng)重復(fù)的背景圖

1.容器空間小于圖片

div {
    width: 200px;
    height: 200px;
    border: solid 1px red;
    background-color: #fff3d4;
    background-size: 300px;
    background-image: url(./moon.jpg);
}
.test1 {
    background-repeat: space;
}
.test2 {
    background-repeat: round;    
}

space 背景圖不會(huì)產(chǎn)生縮放，會(huì)被裁切
round 縮放背景圖至容器大?。ǚ堑缺壤s放）

（上面為space下圖為round）

2.容器空間大于圖片

div {
    width: 200px;
    height: 100px;
    border: solid 1px red;
    background-color: #fff3d4;
    background-size: 60px;
    background-image: url(./moon.jpg);
}
.test1 {
    background-repeat: space;
}
.test2 {
    background-repeat: round;    
}

space 在不縮放的前提下盡可能多的重復(fù)圖片
round 充分利用容器空間，重復(fù)n次之后（x/y軸方向）如果剩余空間大于等于imgWidth*50%則重復(fù)第n+1次，否則拉伸已經(jīng)重復(fù)的背景圖

云服務(wù)器 GPU云服務(wù)器刪除屬性設(shè)置屬性屬性編號(hào) 屬性遍歷

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

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

相關(guān)文章

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

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

tomorrowwu 2019-08-02 16:15 評(píng)論0 收藏0
關(guān)于CSS中的背景屬性background簡述

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

tianren124 2019-08-29 18:45 評(píng)論0 收藏0
CSS background系列屬性

摘要：通過該屬性可以控制繪制的區(qū)域。背景圖片相關(guān)的屬性背景圖片本身是有自身尺寸的，被應(yīng)用元素也有自己的尺寸。通過屬性可以修改原點(diǎn)位置。坐標(biāo)系的反方向都是重復(fù)方式繪制。該位置是相對(duì)于原點(diǎn)構(gòu)建的坐標(biāo)系，默認(rèn)情況下該位置就是在原點(diǎn)。一、元素背景是指哪些區(qū)域默認(rèn)情況下元素的背景是指元素border（包含border）以內(nèi)的區(qū)域。 showImg(https://segmentfault.com/...

mrcode 2019-08-29 17:30 評(píng)論0 收藏0
回味background

摘要：就目前為止，還沒有到好玩的地步，只要知道會(huì)蓋在上面，然后如果在后面寫半角英文逗號(hào)的話，就可以玩多背景圖了，比如。 background是在CSS中使用率很高的一個(gè)屬性之一，由最初的幾個(gè)簡單的屬性到現(xiàn)在新增了很多的屬性，比如background-size、background-origin以及background-clip等屬性，還可以設(shè)置多背景來達(dá)到更多的炫酷效果。以下要談的...

aboutU 2019-08-28 18:04 評(píng)論0 收藏0
css基礎(chǔ)

摘要：引入瀏覽器私有屬性規(guī)則語法標(biāo)識(shí)符標(biāo)識(shí)符常用選擇器簡單選擇器標(biāo)簽選擇器類選擇器選擇器通配符選擇器屬性選擇器選中屬性屬性包含屬性選中屬性值等于或開頭的選中屬性值以開頭的選中屬性值以結(jié)尾的選中屬性值包含的偽類選擇器以上兩個(gè)只用引入 body{ margin: 0; } 瀏覽器私有屬性 chrome...

ThreeWords 2019-08-29 13:19 評(píng)論0 收藏0