CSS3 background 背景
background-clip |
规定背景的绘制区域。 |
可选参数
|
||||||
background-origin |
规定背景图片的定位区域。 |
可选参数
|
||||||
background-size |
规定背景图片的尺寸。 |
高度 宽度
|
设置背景图片来源地址
background:url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2019811721,1832171147&fm=26&gp=0.jpg);
设置背景尺寸
background-size:200%;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
设置图片是否平铺（重复）
background-repeat: no-repeat;
**设置背景起始位置
background-origin:padding-box;
**设置图片可显示区域
background-clip:content-box
<!DOCTYPE html>
<html>
<head>
<style>
div
{
height:300px;
width:300px;
border:solid 2px;
padding:80px;
font-size:27px;
background:url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2019811721,1832171147&fm=26&gp=0.jpg);
/*设置图片尺寸*/
background-size:200%;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
/*设置图片尺寸*/
background-repeat:no-repeat;
/*设置图片尺寸*/
background-origin:padding-box;
/*设置图片尺寸*/
background-clip:content-box
}
</style>
</head>
<body>
<div>这里是内容content区域 这里是内容content区域 这里是内容content区域 这里是内容content区域 这里是内容content区域 这里是内容content区域 这里是内容content区域 这里是内容content区域 这里是内容content区域 </div>
</body>
</html>
难点解析：background-origin 和 background-clip
同样都有三个参数，设置了背景图在盒模型的显示位置。
background-origin 设置的是背景图从盒模型的那个位置开始显示（origin：来源）；
background-clip 设置的是背景图在盒模型的哪个位置可以显示（clip：修剪）
盒模型
padding-box
背景图像从内边距区域开始显示。
border-box
背景图像从边框开始显示。 content-box 背景图从内容框开始显示。
例子解析：
background-origin:padding-box;把背景图片的起始位置设置在padding区域开始
在以上的background-origin 样式基础上，再加上下面的 background-clip 样式
background-clip:content-box;把背景图片可显示的位置设置为 content-box。背景图