CSS3:background新增特性详解

原创 2016年04月13日 18:28:41

前言

CSS3的背景新增了几个特性,这篇文章就是扯扯这些;
在不考虑太低级的浏览器[IE10-]的情况下,主流浏览器和移动端可以直接开用了;

值得一提:先后顺序非常重要,裁切和定位都需要在设置背景图之后,在前是无效的!!


代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS3 Background详解</title>
    <style type="text/css" media="screen">
    .bg-origin>div,
    .bg-clip>div,
    .bg-size>div,
    .bg-multiple,
    .bg-multiple2 {
        width: 150px;
        height: 150px;
        display: inline-block;
        margin: 10px;
        padding: 20px;
        border: 10px solid #ff0;
    }
    /* 
            backgound-origin的出现改变了背景图只能从左上角开始的唯一情况;
            background-origin:padding-box; 是让背景图从内填充区域开始
            backgounrd-origin:border-box; 是让背景图从边框区域开始
            background-origin:content-box; 是让背景图从内容区域开始
         */

    .bg-origin>.bo-pb {
        background: #f00 url(1.png) no-repeat;
        -moz-background-origin: padding-box;
        -webkit-background-origin: padding-box;
        -o-background-origin: padding-box;
        background-origin: padding-box;
    }

    .bg-origin>.bo-bb {
        background: #f00 url(1.png) no-repeat;
        -moz-background-origin: border-box;
        -webkit-background-origin: border-box;
        -o-background-origin: border-box;
        background-origin: border-box;
    }

    .bg-origin>.bo-cb {
        background: #f00 url(1.png) no-repeat;
        -moz-background-origin: content-box;
        -webkit-background-origin: content-box;
        -o-background-origin: content-box;
        background-origin: content-box;
    }
    /*
        裁剪背景图区域,和origin很类似,都有三种模式;
        但是区别在于,clip是裁剪!!!!!!!而不是图片开始的位置;
        padding-box就是在padding之外的背景图区域范围被干掉了,同理;
        content-box就是内容区域之外的全部被裁剪掉了
    */

    .bg-clip>.bc-pb {
        background: #f00 url(1.png) no-repeat;
        -moz-background-clip: padding-box;
        -webkit-background-clip: padding-box;
        -o-background-clip: padding-box;
        background-clip: padding-box;
    }

    .bg-clip>.bc-bb {
        background: #f00 url(1.png) no-repeat;
        -moz-background-clip: border-box;
        -webkit-background-clip: border-box;
        -o-background-clip: border-box;
        background-clip: border-box;
    }

    .bg-clip>.bc-cb {
        background: #f00 url(1.png) no-repeat;
        -moz-background-clip: content-box;
        -webkit-background-clip: content-box;
        -o-background-clip: content-box;
        background-clip: content-box;
    }
    /*
      background-size: auto || length || percentage || cover || contain;
      auto是保持默认原来的大小
      支持像素,百分比,最后两个,
      cover是全面覆盖,完全放大,大多情况焦点会偏移
      contain是根据盒子内容来适配背景图[保持一定的宽高臂力]

      cover和contain的方法都会失真[在图小于盒子模型的时候];
    */

    .bs-percent {
        background: #f00 url(1.png) no-repeat;
        background-size: 50% 70%;
    }

    .bs-contain {
        background: #f00 url(1.png) no-repeat;
        background-size: contain;
    }

    .bs-cover {
        background: #f00 url(1.png) no-repeat;
        background-size: cover;
    }

    .bg-multiple {
        background: url(1.png) ,url(2.jpg) ;
        background-repeat: round;
    }

    .bg-multiple2 {
        background: url(1.png) ,url(2.jpg);
        background-repeat: space;
    }
    </style>
</head>

<body>
    <h1>background-origin:</h1>
    <div class="bg-origin">
        <div class="bo-pb">padding-box</div>
        <div class="bo-bb">border-box</div>
        <div class="bo-cb">content-box</div>
    </div>
    <h1>background-clip:</h1>
    <div class="bg-clip">
        <div class="bc-pb">padding-box</div>
        <div class="bc-bb">border-box</div>
        <div class="bc-cb">content-box</div>
    </div>
    <h1>background-size:</h1>
    <div class="bg-size">
        <div class="bs-percent">percentage</div>
        <div class="bs-contain">contain</div>
        <div class="bs-cover">cover</div>
    </div>
    <h1>background-multiple:</h1>
    <div class="bg-multiple">
        background-repeat: round;
    </div>
    <div class="bg-multiple2">
        background-repeat: space; 是两端对齐
    </div>
</body>

</html>

效果图

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

版权声明:版权所有:CRPER(若需转载请保留著作权);:掘金|Github:CRPER;

HTML5和CSS3新特性一览

HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 定义页面独立的内容区域。 定义页面的侧边栏内容。 ...
  • chandoudeyuyi
  • chandoudeyuyi
  • 2017年04月04日 20:53
  • 3000

Web前端面试指导(四十):CSS3有哪些新特性?

题目点评 CSS3的特性那么多该从哪里说起了?很显然这道题目是有陷阱的,你不可能将所有的特性一个不漏的说出来,就算你说出来,别人还认为你是背的了!所以你主要讲一下在项目中经常用到的Css3的属性就可以...
  • lxcao
  • lxcao
  • 2016年10月12日 15:58
  • 6706

css3新特性之border,background和背景渐变

css3最新属性 ...
  • u014626807
  • u014626807
  • 2015年04月12日 16:23
  • 472

CSS3-新增背景系列background相关属性

1. 回顾一下之前学习过的background属性 1.1 background-color 1.2 background-image 1.3 background-repeat...
  • luyu13141314
  • luyu13141314
  • 2017年07月17日 20:24
  • 220

CSS3 background新增属性用法

1. background属性列表     background-color     background-position     background-size     backgroun...
  • Practicer2015
  • Practicer2015
  • 2015年04月08日 16:37
  • 849

CSS3 Background-size 详解

CSS3 Background-size 详解前段时间在做关于响应式的页面时,由于要兼容ie8,并且要保证图片等比缩放,且对图中内容的显示有要求,导致无法使用background-size等属性,最终...
  • chuan2009he
  • chuan2009he
  • 2015年03月21日 17:49
  • 1016

CSS3-background的基本用法

*{margin:0px;padding: 0px;} .box-top{width: 50%;height: 400px;background-color: #ccc;ma...
  • Marvel__Dead
  • Marvel__Dead
  • 2016年12月24日 10:25
  • 925

解决浏览器background-image属性不支持css3动画

最近在使用background-image属性来实现css3的逐帧动画时,碰到了个问题。在chrome浏览器上,background-image属性是支持css3动画的,但是到了firefox上,就完...
  • yhb241
  • yhb241
  • 2016年05月24日 12:20
  • 1848

CSS3 background-size让背景图寸尺大小可控

 background-size是CSS3提供的一个新特性,它可以让你随心所欲的控制背景图的尺寸大小。先简要的看看background-size的用法。我们知道在CSS2中,背景图的大小在样式中...
  • adenfeng
  • adenfeng
  • 2014年09月11日 17:22
  • 515

CSS3background中属性值介绍

background-size 语法: background-size: [ , ]* = [ | | auto ]{1,2} | cover | conta...
  • qq_36309066
  • qq_36309066
  • 2016年12月07日 13:52
  • 101
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3:background新增特性详解
举报原因:
原因补充:

(最多只允许输入30个字)