zoukankan      html  css  js  c++  java
  • CSS中的background属性

    CSS中的background添加了很多属性(截图来自网络),做个笔记熟悉一下。
    ​ 
    该图来自网络
     
    1、background-attachment
         属性值:fixed | scroll | local;
         默认值:scroll,同时所有元素;
         fixed:  背景图像相对于窗体固定。 
         scroll: 背景图像相对于元素固定。当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。 
         local:  背景图像相对于元素内容固定。当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。(CSS3) 
    2、background-clip
         属性值:border-box | padding-box | content-box | text
         默认值:border-box
         padding-box: 从padding区域(不含padding)开始向外裁剪背景。 
         border-box: 从border区域(不含border)开始向外裁剪背景。 
         content-box: 从content区域开始向外裁剪背景。 
     
     
    从上面的图应该很容易就看出其中那个的差别和用法,background-clip用来裁剪背景图片,使用不同
    的属性值达到不同的效果。
    从字面上来理解很很简单:
    border-box    是一个宽度=border+padding+content的盒子;
    padding-box是一个宽度=padding+content的盒子;
    border-box    是一个宽度=content的盒子;
    把一个上下底面穿透的盒子放在图片上,从顶上俯瞰。管中窥豹的感觉,有木有!
    3、background-origin
         属性值:border-box | padding-box | content-box;
         默认值:padding-box;
         padding-box: 从padding区域(含padding)开始显示背景图像。 
         border-box: 从border区域(含border)开始显示背景图像。 
         content-box: 从content区域开始显示背景图像。
     
         理解参照background-clip
    4、background-size
         属性值:[ <length> | <percentage> | auto ]{1,2} | cover | contain;
         默认值:auto;
         length: 用长度值指定背景图像大小。不允许负值。 
         percentage: 用百分比指定背景图像大小。不允许负值。 
         auto: 背景图像的真实大小。 
         cover: 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。 
         contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。   
     





  • 相关阅读:
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    Java最常用的工具类库
    运筹学那些事,专科学生学习运筹学之网络计划技术,No.6
    这么设计实时数据平台,OLAP再也不是个事儿
    从这 5 个场景 , 看 MPC 多方安全计算的行业应用
    前后端通信进行AES加密(Vue
    圣诞快乐: 用 GaussDB T 绘制一颗圣诞树,兼论高斯数据库语法兼容
    安全多方计算新突破:阿里首次实现“公开可验证”的安全方案
    矩阵元安全多方详细介绍
    MySQL InnoDB引擎如何保证事务特性
  • 原文地址:https://www.cnblogs.com/zhanglun/p/91a1ff573e196cc98e80dd97421901a6.html
Copyright © 2011-2022 走看看