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的内边缘)开始显示背景图片;

  • 相关阅读:
    Mybatis plus 配置
    logback配置
    iview-ui-project-4.0 安装与配置
    Linux系统下Redis安装与配置
    Java中枚举的用法
    Mysql 查询所有课程的成绩第2名到第3名的学生信息及该课程成绩
    java 基础知识一 初识java
    docker 查看 挂载目录
    sqlserver统计所有表及表中记录数
    centos7配置禁用ipv6
  • 原文地址:https://www.cnblogs.com/dunken/p/4380170.html
Copyright © 2011-2022 走看看