zoukankan      html  css  js  c++  java
  • background新增的N个强悍功能!!!

    background新增的N个强悍功能:

    • 首先我们先回顾下background的原有样式:

    background-color 背景颜色

    - 相关属性值:
        - 关键字:red,blue,yellow等具体的颜色单词;
        - 十六进制: 0-9,a-f,以“#”开头的6位十六进制数值表示一种颜色,如#f3e1d2;
        - rgb: 分别代表red,green,blue,取值范围是0-255,如rgb(102,35,210);
    

    background-image 背景图片

    -  通过url引入图片链接地址;
    -  本地相对路径地址——url(img/img.jpg);
    -  网络绝对路径地址——url(http://imgsrc.baidu.com/forum/pic/item/3812b31bb051f819ca6789eadab44aed2f73e7d4.jpg);附上一张16进制图片列表,有兴趣的朋友可以点开看下;
    

    background-repeat 背景平铺

    - no-repeat 不平铺;
    - repeat-x 沿着x轴水平平铺;
    - repeat-y 沿着y轴垂直平铺;
    - repeat 默认值,x轴、y轴都平铺;
    

    background-position 背景定位

    - 具体数值: (可以是正值也可以是负值)
        - x方向(默认是0)
            - 正值从左向右移动,负值从右向左移动;
        - y方向(默认是0)
            - 正值从上向下移动,负值从下向上移动;
    - 百分比:
        - 图的百分之N,对齐元素的百分之N;
    - 关键字:
        - x方向(默认left)
            - left(图的左侧和元素左侧对齐)
            - center (图的中间和中间左侧对齐) 
            - right (图的右侧和中间右侧对齐)
        - y方向(默认top)
            - top (图的顶部和元素顶部对齐)
            - center (图的中间和中间左侧对齐)
            - bottom (图的底部和元素底部对齐)
    

    background-attachment 背景图滚动

    - 相关属性值
        - scroll 默认值,背景图随之滚动条移动;
        - fixed 背景图固定,不随滚动条移动;此时坐标根据整个可视区计算;
    

    background在CSS3中新增样式:

    background-clip 背景裁切

    • 决定元素的背景显示在元素的哪个区域里
    • 具体数值:
      • border-box
        • (默认值)元素背景显示在border及border以内;
      • padding-box
        • 元素背景显示在padding及padding以内;
      • content-box
        • 只有content区域显示元素背景;
      • -webkit-text 只有文字区域显示元素背景;
        • 是weikit内核浏览器的私有样式,只在webkit内核下支持,如chrome,Safari;
        • 新版本的webkit内核已经不支持此样式,需要写成-webkit-background-clip: text;
    • [ ]举例
    #box {
    	 300px;
    	height: 300px;
    	border: 50px solid rgba(0, 0, 0, .3);
    	padding: 50px;
    	background: url(img/timg.jpg);
    	background-clip: content-box;
    	-webkit-background-clip: text;
    }
    

    background-origin 背景原点设置

    • 背景的原点默认是在元素padding区域的左上角,即background-position:left top;
    • 相关属性值
      • border-box
        • 背景原点从元素border的左上角开始计算;
      • padding-box
        • 背景原点从元素padding的左上角开始计算;
      • content-box
        • 背景原点从元素content的左上角开始计算;
    • [ ] 举例
    #box {
    	 300px;
    	height: 300px;
    	border: 50px solid rgba(0, 0, 0, .3);
    	padding: 50px;
    	background: url(img/timg.jpg) content-box content-box;
    	/*background-clip: content-box;
    	background-origin: content-box;*/
    	/*复合样式可以写到一条里面,并且,同时有两个值时,默认第一个是origin,第二个是clip;*/
    }
    

    background-size 背景图尺寸设置

    • 语法:
      • background-size: 图片宽度 图片高度;
    • 值的类型:
      • 具体数值: px;
      • 百分比:
        • 宽度百分比,根据元素宽度计算;
        • 高度百分比,根据元素高度计算;
      • 关键字:
        • cover 覆盖
          • 优先铺满整个元素,等比缩放图片,但图片可能显示不全;
        • contain 包含
          • 优先显示完整图片,等比缩放图片,但可能铺不满整个元素;
        • auto 自动
          • 设置宽度,高度auto时,高度随着宽度等比缩放;
          • 设置高度,宽度auto时,宽度随着高度等比缩放;
    • [ ] 举例
    #box {
    		 300px;
    		height: 400px;
    		border: 1px solid #000;
    		overflow: auto;
    		resize: both;
    		background: url(img/timg.jpg) no-repeat;
    		/* background-size: 200px 100px; */
    		/* background-size: contain; */
    		background-size: 200px auto;
    	}
    

    多背景图设置

    • 在CSS3中支持给同一个元素,添加多张背景图;
    • 每张背景图之间,需要用“,”隔开;
    • 先写的背景图显示在上边,后加的显示在下边;
    • 多背景图时,如果还要添加背景颜色,要把背景颜色加在最后面;
    • [ ] 举例
    #box {
    	 700px;
    	height: 200px;
    	border: 100px solid rgba(0, 0, 0, 0);
    	padding: 100px;
    	background: url(img/timg.jpg) no-repeat padding-box, url(img/timg1.jpg) no-repeat border-box padding-box;
    }
    

    linear-gradient 线性渐变

    • 渐变颜色设置,或者说过渡点,每个点之间用","隔开 linear-gradient(red,blue,yellow)
    • 过渡点的位置设置
      • 百分比
      • 具体数值
      • 当两个颜色的过渡点位置是重叠的,颜色和颜色之间就没有过渡,而是直接跳转;
    • 渐变方向设置
      • 关键字设置起点(需要加各个浏览器的前缀之后,才能被识别)
    • [ ] 举例
    #box {
    	 300px;
    	height: 400px;
    	border: 2px solid #000;
    	/* background: linear-gradient(red 0%,blue 10%,yellow 30%); */
    	background: -webkit-linear-gradient(left top,red 0,blue 20%,yellow 50%);
    	background: -moz-linear-gradient(left top,red 0,blue 20%,yellow 50%);
    	background: -ms-linear-gradient(left top,red 0,blue 20%,yellow 50%);
    	background: linear-gradient(left top,red 0,blue 20%,yellow 50%);
    } 
    
    • 角度设置

      • 0deg从下向上渐变;
      • 默认从上向下渐变;
      • 角度增加为顺时针旋转;
    • repeating-linear-gradient 重复线性渐变

    • [ ] 举例

    #box {
    	 300px;
    	height: 100px;
    	border: 2px solid #000;
    	background: repeating-linear-gradient(90deg, red 0,red 10px,blue 10px, blue 20px, rgba(0, 0, 0, 0) 20px,rgba(0, 0, 0, 0) 30px);
    } 
    
    • 渐变属性 background-image

    radial-gradient 径向渐变

    • 渐变颜色设置,或者说过渡点,每个点之间用","隔开
    • 过渡点的位置设置
      • 百分比<radial-gradient(red 10%, blue 30%);>
      • 具体数值
      • 当两个颜色的过渡点位置是重叠的,颜色和颜色之间就没有过渡,而是直接跳转
    • [ ] 举例
    #box {
    	 300px;
    	height: 300px;
    	border: 2px solid #000;
    	background: radial-gradient(closest-side,blue 10%,red 10%, red 95%,blue 95%);
    }
    
    • 大小设置
      • 具体数值,火狐老版本不支持,以及加了前缀moz依然不支持
      • 最近端,最近角,最远端,最远角,包含或覆盖 closest-side, closest-corner, farthest-side, farthest-corner, contain or cover
    • 形状设置 ellipse||circle
      • 形状设置和大小只能同时设置一个
    • 圆心点设置
      • 必须加前缀才可以设置
      • 关键字
      • 具体数值
    • [ ] 举例
    #box {
    	 300px;
    	height: 400px;
    	border: 2px solid #000;
    	background: -webkit-radial-gradient(10px 100px,farthest-corner, red,blue);
    	background: -moz-radial-gradient(10px 100px,farthest-corner, red,blue);
    	background: -ms-radial-gradient(10px 100px,farthest-corner, red,blue);
    }
    
    • repeating-radial-gradient 重复径向渐变
    • [ ] 举例
    #box {
    	 300px;
    	height: 300px;
    	border: 2px solid #000;
    	background: repeating-radial-gradient(blue 30px,red 60px,red,90px,blue 90px);
    }
    

    以上是background在css3中的新增样式,这些列举的是比较常用的,在实际工作中经常用到,希望对大家有所帮助!

  • 相关阅读:
    Azure PowerShell (7) 使用CSV文件批量设置Virtual Machine Endpoint
    Windows Azure Cloud Service (39) 如何将现有Web应用迁移到Azure PaaS平台
    Azure China (7) 使用WebMetrix将Web Site发布至Azure China
    Microsoft Azure News(4) Azure新D系列虚拟机上线
    Windows Azure Cloud Service (38) 微软IaaS与PaaS比较
    Windows Azure Cloud Service (37) 浅谈Cloud Service
    Azure PowerShell (6) 设置单个Virtual Machine Endpoint
    Azure PowerShell (5) 使用Azure PowerShell创建简单的Azure虚拟机和Linux虚拟机
    功能代码(1)---通过Jquery来处理复选框
    案例1.用Ajax实现用户名的校验
  • 原文地址:https://www.cnblogs.com/smile-mm/p/6852342.html
Copyright © 2011-2022 走看看