background学习总结

background

  
  background:red;
  background-color:red;
  ​

基于background的控制,达到能控制雪碧图的控制?

repeat

  
  /*y轴重复*/
  body
  {
      background-image:url('paper.gif');
      background-repeat:repeat-y;
  }

  
  ​
  /*x轴重复*/
  body
  {
      background-image:url('paper.gif');
      background-repeat:repeat-x;
  }

  
  ​
  ​

  
  background:xpos ypos;

大小

  
   .bg1{background-size: 100% 50%;}
   宽度保持原图大小,高度百分之50%
   我估计正常使用也是等比缩小或放大,不会像这样失真的

  
          .bg2{background-size: cover;}
          /*在等比不失真的前下,将div装满,放不下的地方会隐藏*/
          /*这个还是比交常用的方法!!*/   
          
          

  
          .bg3{height:900px;width:300px;background-size: contain;}
          
          contain是将整装背景图片全部展示在div 里,自动调整大小,以能完整展示!!!

位置

  
  雪碧图-集成图片
      将多个小图片用一张大图加载出来,然后通过background-position属性在正确的位置显示出来!!
  ​
          background-position: 36px -47px;
          后面的两个参数代表了从哪个位置开始加载这张图片,不用非常明确的云记这张雪碧图的位置,只要在浏览器工具里实时的调整就可以了!!!tip

  
  background-position:bottom left; 
  background-position:left top
  background-position:left center
  background-position:left bottom
  background-position:right top
  background-position:right center
  background-position:center top
  background-position:center center
  background-position:center bottom
  ​
  总的来说就是 left right bottom top center 五个单词的组合

  
  background复合写法
  ​
  糟糕的程序员,或者代码压缩时的写法,进行识别!!
  前面的是大小,后面的position,跟本不要在意.正常自己写的时候将其标明,以免出错!!
  ​
  background: url(star.png) no-repeat skyblue 100px 100px / 80px 80px scroll;*/

背景的移动?

fixed粘在上面的意思

  
  ​
  backgruond-attachment:scroll;
  ​
  background-attachment:fixed;
  ​
  一个是背景图片跟着滚动条滚动,
  一个是不跟着滚动条滚动

渐变色?

  
  .bg1{background: -webkit-linear-gradient(left, red, blue);
      background:-webkit-linear-gradient(top, yellow, blue);
  ​
  第一个值代表渐变的起始位置,后两个颜色依次渐变!!
  background:-webkit-linear-gradient(top, yellow, blue,yellow);
  后面添几个颜色渐变几次
  ​
  ​
  grandient梯度,渐变的意思

  
  渐变针对不同浏览器的声明
  ​
  谷歌 -webkit
  火狐 -moz
  ​

  
  能过角度决定渐变的方向
  ​
  (45deg, yellow, blue)起始于左下
  (90deg, yellow, blue)起始于下
  (180deg, yellow, blue)起始于右
  (225def, yellow, blue)起始于右上

颜色格式

  
          十六进制0-9a-f  #aaeeff  #aef
          rgb 0-255
          rgba 0-255  a 透明度
          英文单词 red blue orange pink black green

  
          rgba可以进行调节颜色的透明度,这个有点意思了!!过低版本没有效果

  
  rgba 带有透明度!!
  .bg3{background: -webkit-linear-gradient(left, rgba(196, 211, 243, .5), rgba(109, 17, 243, .5), green);}
  ​

  
  控制渐变的位置关系,百分比
   background: -o-linear-gradient(left, #F536A6, #D221F8 25%, #D221F8 25%, #BE89E8 50%, #BE89E8 50%, #1FE07A 75%,#1FE07A 75%, #7BED27 100% );

  
  box-shadow:inset 0 10px 1em #333;