【365bet备用网址】css背景变形,手拉升降套轴

布局参数

  • 特色:金贝 手拉升降套轴 手动背景轴配件 背景架单轴手动升降器,

查看完整参数>>

布局参数

  • 【365bet备用网址】css背景变形,手拉升降套轴。特色:金贝 双钩支架 摄影背景配件 背景布 手动背景轴配件 背景挂钩

翻看完整参数>>

布局参数

  • 特色:金贝 三勾背景架套装 安装便捷
    配三勾支架一敌手拉升降套轴,实用油画背景架

翻看完整参数>>

CSS(四):背景+变形,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轴。要是第3个参数未提供,则私下认可值为0
transform-origin:任何二个因素都有叁个主旨点,默许境况之下,其主题点是地处成分X轴和Y轴的1/2处。
translateX(): 钦定对象X轴(水平方向)的位移
translateY(): 钦点对象Y轴(垂直方向)的运动
365bet备用网址,rotate(): 钦点对象的2D rotation(2D旋转),需先有 <‘
transform-origin ‘> 属性的定义
scale(): 钦赐对象的2D
scale(2D缩放)。第七个参数对应X轴,第①个参数对应Y轴。即便首个参数未提供,则默许取第多少个参数的值
skew(): 内定对象skew
transformation(斜切扭曲)。第3个参数对应X轴,第一个参数对应Y轴。假若第1个参数未提供,则私下认可值为0
translate3d():
钦定对象的3D位移。第二个参数对应X轴,第3个参数对应Y轴,第3个参数对应Z轴,参数区别意省略

translate:向X轴和Y轴分别偏移成分自个儿的3/6

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>

 

background-origin
设置元素背景图片的固有早先位置。必须有限支撑背景是background-repeat为no-repeat
此属性才会生效。…

发表评论

电子邮件地址不会被公开。 必填项已用*标注