欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS(四):背景+变形

程序员文章站 2022-04-28 18:39:14
...
  • 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包含以下几个方法:
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%

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>