面具位置 | mask-position (Masking) - CSS 中文开发手册 - Break易站

  •   CSS 中文开发手册

    面具位置 | mask-position (Masking) - CSS 中文开发手册

    这是一种实验技术

    由于本技术规范未稳定,请检查各种浏览器使用的兼容性表。还要注意,随着规范的改变,实验技术的语法和行为也会随着浏览器未来版本的变化而变化。

    mask-positionCSS属性相对于mask-origin对于每个定义的掩码图像设置初始位置。

    /* Keyword values */
    mask-position: top;
    mask-position: bottom;
    mask-position: left;
    mask-position: right;
    mask-position: center;
    
    /*  values */
    mask-position: 25% 75%;
    
    /*  values */
    mask-position: 0px 0px;
    mask-position: 1cm 2cm;
    mask-position: 10ch 8em;
    
    /* Multiple values */
    mask-position: 0px 0px, center;
    
    /* Global values */
    mask-position: inherit;
    mask-position: initial;
    mask-position: unset;

    Initial value

    0% 0%

    Applies to

    all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements

    Inherited

    no

    Percentages

    refer to size of mask painting area minus size of mask layer image (see the text for background-position)

    Media

    visual

    Computed value

    Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.

    Animation type

    repeatable list of simple list of length, percentage, or calc

    Canonical order

    the unique non-ambiguous order defined by the formal grammar

    语法

    一个或多个<position>值,用逗号分隔。

    <position>

    这是用一个到四个值表示关于元素的框的边缘的二维位置的一个<position>,它可以给出相对或绝对偏移量。请注意,位置可以设置在元素的框外。

    形式语法

    <position>#where 
    <position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
    where 
    <length-percentage> = <length> | <percentage>

    CSS

    #wrapper {
      border: 1px solid black;
      width: 250px;
      height: 250px;
    }
    
    #masked {
      width: 250px;
      height: 250px;
      background: blue linear-gradient(red, blue);
      mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
      mask-repeat: no-repeat;
      mask-position: top right; /* Can be changed in the live sample */
      margin-bottom: 10px;
    }

    规格

    Specification

    Status

    Comment

    CSS Masking Module Level 1The definition of 'mask-position' in that specification.

    Candidate Recommendation

    Initial definition

    浏览器兼容性

    Feature

    Chrome

    Firefox (Gecko)

    Internet Explorer

    Opera

    Safari (WebKit)

    Basic support

    1.0-webkit

    53.0 (53.0)

    ?

    ?

    4.0-webkit

    Feature

    Android

    Firefox Mobile (Gecko)

    IE Phone

    Opera Mobile

    Safari Mobile

    Basic support

    ?

    53.0 (53.0)

    ?

    ?

    ?

  •   CSS 中文开发手册
    转载请保留页面地址:https://www.breakyizhan.com/css/32441.html

    posted on 2020-07-04 10:42  MrAit  阅读(595)  评论(0编辑  收藏  举报

    导航