zoukankan      html  css  js  c++  java
  • CSS3background新增属性

    1. background-size

        background-size: cover || contain. 该属性可以是背景图片铺满容器,前者适用于当背景图片原始尺寸小于容器大小,后者适用于图片尺寸大于容器。

    2. background-clip 

      取值 : border-box || padding-box || content-box

        需要注意的是 background在Box Model中,他是布满整个元素的Box区域的,并不是从padding内部开始,只不过边框部分遮住了部分background;backgground-color是从左border的左上角到右侧border的右下角,而background-image则是从左侧padding       的左上角到右侧border的右下角。,而webkit下background-clip还有一个更神奇的效果,就是可以让图片填充文本,那就是background-clip:text配合其私有属性-webkit-text-fill-color

        

    在前面的基础上,我们把样式换一下

       .text {
          font-size: 40px;
          text-transform: uppercase;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
       }
    

    效果:

    3. background-orgin

       决定背景图片的起始点。

     

    如果background-attachment为fixed的话,background-orign将不会起作用。

      

  • 相关阅读:
    51Nod1740 蜂巢迷宫
    51Nod1279 扔盘子
    51Nod1095 Anigram单词
    51Nod1094 和为k的连续区间
    51Nod1072 威佐夫游戏
    PHP 图片处理
    ubuntu 安装 ftp
    linux下ab网站压力测试命令
    iptables FOr linux
    discuz 个性化时间函数
  • 原文地址:https://www.cnblogs.com/ssyz1988/p/3741685.html
Copyright © 2011-2022 走看看