zoukankan      html  css  js  c++  java
  • css3新增的background属性

    1、background-size

    可取值:auto(背景图片正常显示)

        size size (150px 40%)

        cover (背景图片覆盖整个背景)

        contain(背景图片缩小填满整个背景)

    实例:

      

     /*这段代码是当不支持CSS3 Media Queries浏览器按background-size:cover模式显示背景图片*/
       body {
         background: #000 url(myBackground_1280x960.jpg) center center fixed no-repeat;
         -moz-background-size: cover;
         -webkit-background-size: cover;
         -o-background-size: cover;
         background-size: cover;
       }
       /*1024px X 768px */
       @media only all and (max- 1024px) and (max-height: 768px) {
           body {	
    	  -moz-background-size: 1024px 768px;
    	  -webkit-background-size: 1024px 768px;
    	  -o-background-size: 1024px 768px;
    	  background-size: 1024px 768px;
           }
        }
       /*640px X 480px*/
       @media only all and (max- 640px) and (max-height: 480px) {
           body {	
    	   -moz-background-size: 640px 480px;
    	   -webkit-background-size: 640px 480px;
    	   -o-background-size: 640px 480px;
    	   background-size: 640px 480px;
           }
       }
    

      2、background-clip

    可取值:

    1、border-box:此值为默认值,背景从border区域向外裁剪,也就是超出部分将被裁剪掉;

    2、padding-box:背景从padding区域向外裁剪,超过padding区域的背景将被裁剪掉;

    3、context-box:背景从content区域向外裁剪,超过context区域的背景将被裁剪掉;

      3.background-origin

    取值说明:

    1、padding-box(padding):此值为background-origin的默认值,决定background-position起始位置从padding的外边缘(border的内边缘)开始显示背景图片;

    2、border-box(border):此值决定background-position起始位置从border的外边缘开始显示背景图片;

    3、content-box(content):此值决定background-position起始位置从content的外边缘(padding的内边缘)开始显示背景图片;

  • 相关阅读:
    同步linux服务器的时间
    Esper学习之四:Context
    Haproxy+Keepalived搭建Weblogic高可用负载均衡集群
    C++中的对象指针
    第十五周oj刷题——Problem M: C++习题 矩阵求和--重载运算符
    《人工智能教程(张仰森)》(二)
    JAVA 并发编程-线程池(七)
    新手学測试----Unit Test(单元測试)
    HDU2193-AVL-数据结构-AVL
    Visual Assist X破解版安装(vs2010助手)
  • 原文地址:https://www.cnblogs.com/dunken/p/4380170.html
Copyright © 2011-2022 走看看