background-repeat space/round屬性

姘擱『發布于2019-08-29 15:34 / 3507人閱讀

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

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 背景圖不會產生縮放，會被裁切
round 縮放背景圖至容器大小（非等比例縮放）

（上面為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 在不縮放的前提下盡可能多的重復圖片
round 充分利用容器空間，重復n次之后（x/y軸方向）如果剩余空間大于等于imgWidth*50%則重復第n+1次，否則拉伸已經重復的背景圖

云服務器 GPU云服務器刪除屬性設置屬性屬性編號屬性遍歷

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113404.html

關于CSS中的背景屬性background簡述

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

tomorrowwu 2019-08-02 16:15 評論0 收藏0
關于CSS中的背景屬性background簡述

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

tianren124 2019-08-29 18:45 評論0 收藏0
CSS background系列屬性

摘要：通過該屬性可以控制繪制的區域。背景圖片相關的屬性背景圖片本身是有自身尺寸的，被應用元素也有自己的尺寸。通過屬性可以修改原點位置。坐標系的反方向都是重復方式繪制。該位置是相對于原點構建的坐標系，默認情況下該位置就是在原點。一、元素背景是指哪些區域默認情況下元素的背景是指元素border（包含border）以內的區域。 showImg(https://segmentfault.com/...

mrcode 2019-08-29 17:30 評論0 收藏0
回味background

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

aboutU 2019-08-28 18:04 評論0 收藏0
css基礎

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

ThreeWords 2019-08-29 13:19 評論0 收藏0