CSS(四)：背景+变形

php中文网

发布时间：2016-08-15 16:49:50

1670人浏览过

来源于php中文网

原创

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%

Css背景渐变代码生成插件

下载

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>