CSS中对图片(background)的一些设置心得总结

Posted 2021-02-07 muzixiaozha

写网页的时候很多情况需要对图片进行操作，如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢，这是一个问题，对于懒得开ps切图的我，通常会直接在网络上download一张图片，直接拖到html里，这就需要对图片的css样式进行一些调整，鉴于我总是记不住一些样式属性而无法让图片按我的想法摆放，不得已每次都要百度一下，几次下来，让我很是恼火，于是专门整理了一些css中关于图片的一些属性设置，置于此，以供下次望及时查看（废话真多）：

　　css2中关于background的属性有：

•   font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px;"> 

   

  　　　　　　background：#eee;

  •  background-image: 引用图片作为背景,如 

    　　backgroud-image：url("img/bg.jpg");

  •  background-position: 指定元素背景图片的位置,这个很多人都不习惯用，但还是蛮有用处的，实际中图片的左上角正对应元素的左上角，当你的打算使用像素来定位的时候，可以使用：

    background-position: 0 0;//第一个数字代表x轴水平位置，第二个数字代表y轴垂直位置
    background-position: 0 100px;

  　　当你的元素尺寸不适用像素设置的时候，还可以使用其他数值，如

  　　 background-position: top right; // 图片的top对应元素的top 图片的right对应元素的right
  　　 background-position:  100% 50%; //使用元素的百分比数值设置图片位置，道理同上

  •  background-repeat: 决定是否重复背景图片，取值有以下几种：
    

     background-repeat: repeat;       //图片可重复
     background-repeat: no-repeat ; //图片不可重复
     background-repeat: repeat-x;    //图片在x轴上可以重复
     background-repeat: repeat-y;    //图片在y轴上可以重复
     background-repeat: inherit;       //遵从父元素的设置 

    
  • background-attachment: 决定背景图是否随页面滚动,取值有：

    background-attachment: scroll; //默认值;表示背景紧贴元素
    background-attachment: fixed;  //背景不随元素滚动，当页面向下时，背景待在最初相对于浏览器的位置
    background-attachment: inherit;//遵循父元素的设定

  　　当希望设置background的多个属性时，可以分别设置每一个，也可以合并为一行，写在一个属性里：

  　　background: transparent url(image.jpg) 50% 0 scroll repeat-y;

           css3中对于background添加了很多属性：

  • background-color,设置图片的大小尺寸,取值有好几个：

      background-size: contain;     //缩小图片以适应元素的尺寸（图片宽高比不变）
      background-size: cover;       //扩展图片以填满元素（图片宽高比不变）
      background-size: 50% 100%;    //自定义调整图片大小 

     

  • background-clip，背景修剪，可以很好的控制背景的显示位置：取值有：

     background-clip: border-box;   //背景显示在边框内
     background-clip: padding-box;  //背景显示在padding内(不是边框内)
     background-clip: content-box;  //只在内容内显示背景（不在padding中，也不在边框中）

  　　还有两个属性为，background-break和background-origin，我对这两个属性并没有使用过，看了看网上的讲解觉得没啥大用处，这里就不写下来误人子弟了。

  css中关于背景的知识点还是很博大精深的，以后有新的理解，再往这儿添。

  注：文章参考》》》》http://blog.csdn.net/adenfeng/article/details/8199362

                                             https://www.cnblogs.com/fingerboy/p/5146229.html