css 背景background-size origin position
-
background-size
- 在no-repeat情况下，如果容器宽高比与图片宽高比不同
- cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；
- contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；
- 在repeat情况下：cover:与上述相同；contain:容器内至少有一张完整的图，容器留白区域则平铺背景图，铺不下的再裁掉。
- 该属性还可以设置百分比或者具体像素值 background-size: length|percentage|cover|contain;
- 在no-repeat情况下，如果容器宽高比与图片宽高比不同
-
background-origin
属性规定背景图片的定位区域。
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
规定背景的绘制区域。
- 语法
background-clip: border-box|padding-box|content-box; - border-box 背景被裁剪到边框盒。
- padding-box 背景被裁剪到内边距框。
- content-box 背景被裁剪到内容框。
- 语法
代码展示
<!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;
/*设置了背景图片 该颜色不会在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;*/
/*图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；*/
/*background-size: contain;*/
/*origin: 设置背景图片的起始位置 , 默认是padding-box 表示背景图的左上角和padding盒子左上角对齐*/
/* 背景图片可以放置于 content-box、padding-box 或 border-box 区域。*/
/*-webkit-background-origin: content-box;
background-origin: content-box;*/
/*图片的裁切 在这个范围内的才显示 其他的被裁切掉*/
/*background-clip: content-box;*/
/*图片的左上角相对于 padding 左上角 横向右移动50px 纵向下移动50px*/
/*如果设置了background-origin的话, 相对于设置的background进行偏移*/
/*background-position: -50px -50px; 其偏移位置可以是负值
表示背景图片相对于padding盒子模型左上角(不设置origin)向左移动50px 向上移动50px*/
/*background-position: 50px 50px;*/
}
</style>
</head>
<body>
<div class="img-block"> content: 500 * 500 padding: 20px; border:10px; </div>
</body>
</html>
