zoukankan      html  css  js  c++  java
  • 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对应的是背景图像。

  • 相关阅读:
    gitlab备份及迁移
    python paramiko 进行文件上传处理
    秒杀场景简介
    nmon--非常棒的LINUX/AIX性能计数器监测和分析工具
    使用wait()与notify()实现线程间协作
    【转】Spring bean处理——回调函数
    ldconfig和ldd用法
    tcpdump 获取http请求url
    clearfix清除浮动
    git push命令
  • 原文地址:https://www.cnblogs.com/1016391912pm/p/12669275.html
Copyright © 2011-2022 走看看