CSS(四)：背景+变形

• background-origin

设置元素背景图片的原始起始位置。必须保证背景是background-repeat为no-repeat
此属性才会生效。
可取值有 border-box | padding-box | content-box

border-box：设置背景图片原点在边框的最左上角

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    background-repeat:no-repeat;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-origin:border-box;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">}
</span><span style="color: #008080;">6</span> 
<span style="color: #008080;">7</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

padding-box：设置背景图片原点在内边距的最左上角

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    background-repeat:no-repeat;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-origin:padding-box;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">}
</span><span style="color: #008080;">6</span> 
<span style="color: #008080;">7</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

content-box：设置背景图片原点在内容区域的最左上角

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    background-repeat:no-repeat;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-origin:content-box;
</span><span style="color: #008080;">5</span> <span style="color: #000000;">}
</span><span style="color: #008080;">6</span> 
<span style="color: #008080;">7</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

• background-clip

设定背景图像向外裁剪的区域。
可取值有 border-box | padding-box | content-box

border-box：设置裁剪区域为边框以内，包括边框

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    background-clip:border-box;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">}
</span><span style="color: #008080;">5</span> 
<span style="color: #008080;">6</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

padding-box：设置裁剪区域为内边距以内，包括内边距

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    background-clip:padding-box;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">}
</span><span style="color: #008080;">5</span> 
<span style="color: #008080;">6</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

content-box：设置裁剪区域为内容区域

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    background-clip:content-box;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">}
</span><span style="color: #008080;">5</span> 
<span style="color: #008080;">6</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

• transform

改变元素的大小，透明，旋转角度，扭曲度等。
语法：
transform：none |  +
transform-function包含以下几个方法：
translate()： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
transform-origin:任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。
translateX()： 指定对象X轴（水平方向）的平移
translateY()： 指定对象Y轴（垂直方向）的平移
rotate()： 指定对象的2D rotation（2D旋转），需先有 属性的定义
scale()： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
skew()： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translate3d()： 指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略

translate：向X轴和Y轴分别偏移元素自身的50%

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: translate(50%,50%);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

transform-origin：把元素的中心点设置在0 0位置，即左上角

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform-origin:0 0;
</span><span style="color: #008080;">6</span> <span style="color: #000000;">    transform: translate(50%,50%);
</span><span style="color: #008080;">7</span> <span style="color: #000000;">}
</span><span style="color: #008080;">8</span> 
<span style="color: #008080;">9</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

translateX：仅设置X轴的偏移

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: translateX(50%);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

translateY：仅设置Y轴的偏移

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: translateY(50%);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

rotate：设置元素进行2D旋转，接受的参数为角度（deg）

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: rotate(180deg);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

scale：设置元素缩放3倍，接受的参数为数值，表示放大的倍数

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: scale(3);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

skew：设置元素的倾斜角度

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: skew(60deg);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

translate3d：设置元素的3d位移

<span style="color: #008080;">1</span> <span style="color: #000000;">.img{
</span><span style="color: #008080;">2</span> <span style="color: #000000;">    width:200px;
</span><span style="color: #008080;">3</span> <span style="color: #000000;">    height:200px;
</span><span style="color: #008080;">4</span> <span style="color: #000000;">    background-image:url(1.jpg);
</span><span style="color: #008080;">5</span> <span style="color: #000000;">    transform: translate3d(50px,50px,1px);
</span><span style="color: #008080;">6</span> <span style="color: #000000;">}
</span><span style="color: #008080;">7</span> 
<span style="color: #008080;">8</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="img"</span><span style="color: #0000ff;">></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>