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: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。   
     





  • 相关阅读:
    函数后面加delete和default
    passing as 'this' argument discards qualifier
    QString和std::string互相转换
    ERROR in config: Command requires a target workspace.错误解决方案
    论文阅读:Precise and realistic grasping and manipulation in Virtual Reality without force feedback
    unreal 安卓打包出现 LogHttp: Warning: 000001D09B0C8F00: request failed, libcurl error 哇塞 真的是爆炸 不知道为啥巨慢
    UE4-打包安卓报错 /Android/APKgradle ungradle.bat" :app:assembleDebug
    oculus quest2与ue开发教程
    Understand Oculus Integration Package Components
    HandsInteractionTrainScene Sample Scene
  • 原文地址:https://www.cnblogs.com/zhanglun/p/91a1ff573e196cc98e80dd97421901a6.html
Copyright © 2011-2022 走看看