五、背景

一、有偏移量的背景图片定位

　　1、使用background-position

　　　

　　　background: #ccc url(1.png) no-repeat;

　　　background-position: right 10px bottom 10px;

　　2、用calc()计算

　　　

　　　background：#ccc url(1.png) no-repeat;

　　　background-position: calc(100% - 20px) calc(100% - 20px);

　　3、改变定位的基准

　　　

　　　padding: 5px;

　　　background:  #ccc url(1.png) no-repeat right bottom;

　　　background-origin: centent-box;

 

二、制作条纹背景

　　　1、制作横向条纹背景

　　　　

　　　　background: linear-gradient(#ccc 50%,#555 50%);

　　　　background-size: 100% 30px;

　　　2、制作大小不一的横向条纹背景

　　　　　　　

　　　　background: linear-gradient(#ccc 30%,#555 0);

　　　　background-size: 100% 30px;

 　　　3、制作多种颜色的横向条纹背景

　　　　

　　　　background: linear-gradient(#fb3 33.3%,#58a 0, #58a 66.6%, yellowgreen 0);

　　　　background-size: 100% 45px;

　　　4、制作垂直条纹

　　　　

　　　　background: linear-gradient(to right,#fb3 50%,#58a 0);

　　　　background-size: 30px 100%;

　　　5、制作斜向条纹

　　　　

　　　　background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);

　　　　background-size: 30px 30px;

　　　6、制作60°的斜向条纹

　　　　　　　

　　　　background: repeating-linear-gradient(60deg,#fb3, #fb3 15px, #58a 0, #58a 30px)

 

 

　　　7、同一色系的条纹

              

　　　　background: #444;

　　　　background-image: repeating-linear-gradient(30deg,

　　　　　　　　　　　　　　hsla(0, 0%, 100%, .1),

　　　　　　　　　　　　　　hsla(0, 0%, 100%, .1) 15px,

　　　　　　　　　　　　　　transparent 0, transparent 30px);

 

三、直角切角效果

　　1、一个切角效果

　　

　　background: #333;　　//设定保险，如果浏览器不支持linear-gradient可以得到纯色背景

　　background: linear-gradient(-45deg, transparent 15px, #333 0);

　　2、两个切角的效果

　　　

　　background: linear-gradient(45deg, transparent 15px, #555 0) left,

　　　　　　　　linear-gradient(-45deg, transparent 15px, #333 0) right;

　　background-size: 50% 100%;　　//不设定会出现重叠现象

　　background-repeat: no-repeat;　　//不设定会出现重复现象

　　

　　background: #333;

　　background: linear-gradient(135deg, transparent 15px, #555 0) top left,

　　　　　　　　linear-gradient(-135deg, transparent 15px, #333 0) top right;

　　background-size: 50% 100%;

　　background-repeat: no-repeat;

　　

　　background: #333;

　　background: linear-gradient(135deg, transparent 15px, #555 0) top left,

　　　　　　　　linear-gradient(45deg, transparent 15px, #333 0) bottom left;

　　background-size: 100% 50%;

　　background-repeat: no-repeat;

　　3、四个切角效果

　　　

　　background: #333;

　　background:  linear-gradient(135deg, transparent 15px, #555 0) top left,

　　　　　　　　linear-gradient(45deg, transparent 15px, #333 0) bottom left,

　　　　　　　　linear-gradient(-135deg, transparent 15px, #444 0) top right,

　　　　　　　　linear-gradient(-45deg, transparent 15px, #222 0) bottom right;

　　background-size: 50% 50%;

　　background-repeat: no-repeat;

 

 

 四、弧形切角效果

　　

　　background: #333;

　　background:  radial-gradient(circle at top left, transparent 15px, #555 0) top left,

　　　　　　　　radial-gradient(circle at bottom left, transparent 15px, #333 0) bottom left,

　　　　　　　　radial-gradient(circle at top right, transparent 15px, #444 0) top right,

　　　　　　　　radial-gradient(circle at bottom right, transparent 15px, #222 0) bottom right;

　　background-size: 50% 50%;

　　background-repeat: no-repeat;

 五、裁剪做切角

　　

　　background: #333;

　　clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);