zoukankan      html  css  js  c++  java
  • background-size使用参考指南

    语法:
    background-size :[ <length> | <percentage> | auto ]{1,2} | cover | contain
    相关属性: background-clip | background-origin
    取值:
    <length>:
    由浮点数字和单位标识符组成的长度值,第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值会被设置为 "auto"。不可为负值。

    <percentage>:
    以父元素的百分比来设置背景图像的宽度和高度,第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值会被设置为 "auto", 取值为0%到100%之间的值。不可为负值。

    说明:
    设置背景图片的大小。
    指定背景大小,以象素或百分比显示。当指定为百分比时,大小会由所在区域的宽度、高度,以及background-origin的位置决定。

    还可以通过cover和contain来对图片进行伸缩。

    cover:

    把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中。

    contain:

    把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

     引擎类型:

    兼容性:

    相关属性: background-clip | background-origin

    1)background-clip:

    定义和用法

    background-clip 属性规定背景的绘制区域。默认值:border-box

    语法

    background-clip: border-box|padding-box|content-box;

    2)background-origin:

    定义和用法

    background-origin 属性规定 background-position 属性相对于什么位置来定位。 默认值:padding-box

    注释:如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。

     语法

    background-origin: padding-box|border-box|content-box;

     

  • 相关阅读:
    【皇甫】☀ 亮眼的颜色
    【皇甫】☀独一无二
    【皇甫】☀唯一
    【皇甫】☀一本好书 你值得浏览
    【皇甫】☀标题自己起 进来看像啥就是啥
    【皇甫】☀说说那些选择器
    【皇甫】☀标题被你吃了
    【皇甫】☀四套写入方案(仅供参考)
    【皇甫】☀内侧小解析---小行动(2)
    【皇甫】☀内侧小解析---小行动(1)
  • 原文地址:https://www.cnblogs.com/xiangru0921/p/6501061.html
Copyright © 2011-2022 走看看