CRPER

折腾是一种乐趣,求知是一种追求。不懂就学,懂则分享。WeChat:MY1083

CSS3:background新增特性详解

前言

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; https://blog.csdn.net/bomess/article/details/51145696
个人分类: 笔记-HTML4&5/CSS2.1&3
所属专栏: CSS3及HTML5折腾记
上一篇javascript跳跃式前进(3) - 跳入JSON
下一篇CSS3:渐变(gradient)用法详解
想对作者说点什么? 我来说一句

HTML5与CSS3新增特性

HTML5、CSS3

lost_path lost_path

2017-10-29 23:34:36

阅读数:345

没有更多推荐了,返回首页

关闭
关闭