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

    (1) background-image属性

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

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

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

    可以给不同的图片设置多个不同的属性

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

    (2) background-size 属性

    background-size指定背景图像的大小。CSS3以前,背景图像大小由图像的实际大小决定。

    CSS3中可以指定背景图片,让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。

    你指定的大小是相对于父元素的宽度和高度的百分比的大小。

    div { background:url(img_flwr.gif);
    
    background-size:100% 100%;
    
     background-repeat:no-repeat;
    
    }

    演示示例background-size 属性

    (3) background-Origin属性

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

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

     

    div { 
    background:url(img_flwr.gif); 
    background-repeat:no-repeat; 
    background-size:100% 100%; background-origin:content-box; 
    }

     

    (4) background-clip属性

    CSS3background-clip背景剪裁属性是从指定位置开始绘制。

    #example1 { 
    
    border: 10px dotted black;
    
    padding: 35px;
    
    background: yellow; background-clip: content-box;
    
    }

     

  • 相关阅读:
    计算机英语
    NSQ学习记录
    Java学习记录-注解
    VS插件开发

    双链表
    顺序表
    顺序队列
    顺序栈

  • 原文地址:https://www.cnblogs.com/chengxiao35/p/13537801.html
Copyright © 2011-2022 走看看