css 背景background-size origin position
-
background-size
- 在no-repeat情況下，如果容器寬高比與圖片寬高比不同
- cover：圖片寬高比不變、鋪滿整個容器的寬高扼倘，而圖片多出的部分則會被截掉；
- contain:圖片自身的寬高比不變，縮放至圖片自身能完全顯示出來滑潘，所以容器會有留白區(qū)域；
- 在repeat情況下：cover:與上述相同锨咙；contain:容器內(nèi)至少有一張完整的圖语卤，容器留白區(qū)域則平鋪背景圖，鋪不下的再裁掉酪刀。
- 該屬性還可以設(shè)置百分比或者具體像素值 background-size: length|percentage|cover|contain;
- 在no-repeat情況下，如果容器寬高比與圖片寬高比不同
-
background-origin
屬性規(guī)定背景圖片的定位區(qū)域粹舵。
image.png
/*在 content-box 中定位背景圖片：*/
div
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}
-
background-clip
規(guī)定背景的繪制區(qū)域。
- 語法
background-clip: border-box|padding-box|content-box; - border-box 背景被裁剪到邊框盒骂倘。
- padding-box 背景被裁剪到內(nèi)邊距框眼滤。
- content-box 背景被裁剪到內(nèi)容框。
- 語法
代碼展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-size origin clip屬性</title>
<style>
.img-block {
width: 500px;
height: 500px;
margin: 0 auto;
/*設(shè)置了背景圖片 該顏色不會在border上顯示 因為默認origin是padding*/
background: red;
padding: 20px;
border: 10px dashed dodgerblue;
/* 1920*1080 背景圖片默認顯示層為padding-box*/
background: url('./bg.jpg') no-repeat;
/*cover：圖片寬高比不變历涝、鋪滿整個容器的寬高诅需，而圖片多出的部分則會被截掉；*/
/*background-size: cover;*/
/*圖片自身的寬高比不變荧库，縮放至圖片自身能完全顯示出來堰塌，所以容器會有留白區(qū)域；*/
/*background-size: contain;*/
/*origin: 設(shè)置背景圖片的起始位置 , 默認是padding-box 表示背景圖的左上角和padding盒子左上角對齊*/
/* 背景圖片可以放置于 content-box分衫、padding-box 或 border-box 區(qū)域场刑。*/
/*-webkit-background-origin: content-box;
background-origin: content-box;*/
/*圖片的裁切 在這個范圍內(nèi)的才顯示 其他的被裁切掉*/
/*background-clip: content-box;*/
/*圖片的左上角相對于 padding 左上角 橫向右移動50px 縱向下移動50px*/
/*如果設(shè)置了background-origin的話, 相對于設(shè)置的background進行偏移*/
/*background-position: -50px -50px; 其偏移位置可以是負值
表示背景圖片相對于padding盒子模型左上角(不設(shè)置origin)向左移動50px 向上移動50px*/
/*background-position: 50px 50px;*/
}
</style>
</head>
<body>
<div class="img-block"> content: 500 * 500 padding: 20px; border:10px; </div>
</body>
</html>
