• CSS3(3)背景


    CSS3 背景

    CSS3中包含几个新的背景属性,提供更大背景元素控制。

    在本章您将了解以下背景属性:

    • background-image
    • background-size
    • background-origin
    • background-clip

    CSS3 background-image属性

    CSS3中可以通过background-image属性添加背景图片。

    不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。

    <style>
    #example1 {
        background-image:  url(paper.gif),url(img_flwr.gif);  //前面的图片会优先显示(即会覆盖后面的图片)
        background-position: right bottom, left top; //两张图片的位置
        background-repeat: no-repeat, repeat; //是否平铺
        padding: 15px;
    }
    </style>

    也可以这样写:

    #example1 {
        background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
        padding: 15px;
    }

    CSS3 background-size 属性

    background-size指定背景图像的大小。

    background-size:80px 60px;  或者  background-size:100% 100%;

    CSS3 的 background-origin 属性

    background-origin 属性指定了背景图像的位置区域。

    content-box, padding-box,和 border-box区域内可以放置背景图像。

    background-origin:content-box;

    CSS3 background-clip属性

    和上面的origin意思一样,但这个对应的是背景颜色,origin对应的是背景图像。

  • 相关阅读:
    理解钩子Hook以及在Thinkphp下利用钩子使用行为扩展
    ThinkPHP 分页类的使用及退出功能的实现
    ThinkPHP登录功能代码
    thinkphp遗留问题
    ThinkPHP随笔
    ThinkPhp循环出数据库中的内容并输出到模板
    thinkphp常用Config.php配置项
    thinkphp笔记
    PHP面向对象学习七 总结
    Trie树
  • 原文地址:https://www.cnblogs.com/1016391912pm/p/12669275.html
Copyright © 2020-2023  润新知