zoukankan      html  css  js  c++  java
  • CSS3 背景

    CSS3包含多个新的背景属性,他们提供了对背景更强大的控制。

    本章将学到一下背景属性:

    • background-size
    • background-origin

    你也将学到如何使用多重背景图片。

    浏览器支持:

    属性浏览器支持
    background-size          
    background-origin          

    Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持新的背景属性。

    1.background-size属性

    background-size属性规定背景图片的尺寸。

    在CSS3之前,背景图片的尺寸是由图片的实际尺寸决定的。在CSS3中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。

    你能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。

    1.调整背景图片的大小:

            /*规定背景图片的尺寸*/
            div.backgroundOne {
                width: 200px;
                height: 200px;
                background-image: url(../Images/1.jpg);
                background-repeat: no-repeat;
                background-size: 40px 40px;
                border: 2px solid red;
            }

            /*按百分比*/
            div.backgroundTwo {
                width: 200px;
                height: 200px;
                background-image: url(../Images/1.jpg);
                background-size: 40% 40%;
                background-position: center center;
                background-repeat: no-repeat;
                border: 2px solid blue;
            }

    2.background-origin 属性

    background-origin属性规定背景图片的定位区域。

    背景图片可以放置于content-box、padding-box或border-box区域

            /*background-origin属性*/
            div.backgroundOne {
                width: 200px;
                height: 200px;
                float: left;
                background-image: url(../Images/1.jpg);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                background-origin: content-box;
                border: 1px dashed red;
                padding: 10px;
            }

     CSS3多重背景图片

     /*多重背景图片*/
            div.backgroundOne {
                width: 200px;
                height: 100px;
                border: 1px dotted red;
                background-image: url(../Images/add.gif), url(../Images/2.gif),url(../Images/1.jpg);
                background-repeat: no-repeat;
            }

  • 相关阅读:
    代码签名证书原理和作用
    安装SSL证书有什么作用?
    有关如何修复Android手机上的SSL连接错误的快速指南
    可信时间戳如何生成?时间戳基本工作原理
    全球通用的数字证书产品选购指南
    国密SSL证书申请免费试用
    国密SSL证书免费试用申请指南
    哈希算法的原理和用途详解
    https证书安装无效的主要原因
    Anatomy of a Database System学习笔记
  • 原文地址:https://www.cnblogs.com/tianma3798/p/3575796.html
Copyright © 2011-2022 走看看