你的位置:首页 > 网页设计

[网页设计]CSS(四):背景+变形


  • background-origin

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

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

1 .img{2   background-image:url(1.jpg);3   background-repeat:no-repeat;4   background-origin:border-box;5 }6 7 <div class="img"></div>

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

1 .img{2   background-image:url(1.jpg);3   background-repeat:no-repeat;4   background-origin:padding-box;5 }6 7 <div class="img"></div>

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

1 .img{2   background-image:url(1.jpg);3   background-repeat:no-repeat;4   background-origin:content-box;5 }6 7 <div class="img"></div>

  • background-clip

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

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

1 .img{2   background-image:url(1.jpg);3   background-clip:border-box;4 }5 6 <div class="img"></div>

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

1 .img{2   background-image:url(1.jpg);3   background-clip:padding-box;4 }5 6 <div class="img"></div>

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

1 .img{2   background-image:url(1.jpg);3   background-clip:content-box;4 }5 6 <div class="img"></div>

  • transform

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

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

1 .img{2   width:200px;3   height:200px;4   background-image:url(1.jpg);5   transform: translate(50%,50%);6 }7 8 <div class="img"></div>

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

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

translateX:仅设置X轴的偏移

1 .img{2   width:200px;3   height:200px;4   background-image:url(1.jpg);5   transform: translateX(50%);6 }7 8 <div class="img"></div>

translateY:仅设置Y轴的偏移

1 .img{2   width:200px;3   height:200px;4   background-image:url(1.jpg);5   transform: translateY(50%);6 }7 8 <div class="img"></div>

rotate:设置元素进行2D旋转,接受的参数为角度(deg)

1 .img{2   width:200px;3   height:200px;4   background-image:url(1.jpg);5   transform: rotate(180deg);6 }7 8 <div class="img"></div>

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

1 .img{2   width:200px;3   height:200px;4   background-image:url(1.jpg);5   transform: scale(3);6 }7 8 <div class="img"></div>

skew:设置元素的倾斜角度

1 .img{2   width:200px;3   height:200px;4   background-image:url(1.jpg);5   transform: skew(60deg);6 }7 8 <div class="img"></div>

translate3d:设置元素的3d位移

1 .img{2   width:200px;3   height:200px;4   background-image:url(1.jpg);5   transform: translate3d(50px,50px,1px);6 }7 8 <div class="img"></div>