css蒙版 - CSDN
精华内容
参与话题
  • CSS3蒙版 Mask

    万次阅读 2018-11-14 10:17:58
    之前mask这个属性用的比较少,对它也并不了解,又一次在前端群里面五一看到人打了一个这样的属性出来,我感觉很陌生,马上去看了,原来真的有这么神奇的属性,蒙版,可以实现很多复杂多样化的遮罩。 语法:   -...

     

    之前mask这个属性用的比较少,对它也并不了解,又一次在前端群里面五一看到人打了一个这样的属性出来,我感觉很陌生,马上去看了,原来真的有这么神奇的属性,蒙版,可以实现很多复杂多样化的遮罩。

    语法:

     

    -webkit-mask-image:url(circle.svg);


    和background的样式语法是一样的,蒙版的alpha设置为0那后面的图片也不见了,设置为1才是可见。

     

    还可以设置渐变:

     

    -webkit-mask-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));

    可以用渐变来代替图片做蒙版,都可以的。

     

    也可以设置边框遮罩,语法:

     

    -webkit-mask-box-image:url(m1.png) 0 round;

    具体的语法:

     

    观看w3c的教程和API

    展开全文
  • css3背景,蒙版,渐变

    千次阅读 2018-06-13 23:27:34
    一、CSS3背景1、背景原点控制(background-origin :padding-box; (默认)) border-box | padding-box | content-box background-origin是用来决定图片的原始起始位置 它有三个可选值content-box,padding- box,...

    一、CSS3背景

    1、背景原点控制(background-origin :padding-box; (默认))

        border-box | padding-box | content-box
        background-origin是用来决定图片的原始起始位置

        它有三个可选值content-box,padding- box,border-box,即可以选择背景图片是从内容区域或者内边距或者边框开始显示。

    2、背景剪切控制(background-clip )

        1).border-box | padding-box | content-box
        clip原意为裁剪,截取。
        background-clip的作用为将背景图片做适当的裁剪,以适应需要。
        background-clip有content- box,padding-box,border-box三个值
        剪裁方法:根据设置的盒子部位,那么图片在这个部位的外边缘以外的部分都会不可见。
        2).background-clip & background-origin

        图片起始位置是从border-box开始,但background-clip设置的值是content-box,在content之外,也就是border-box内,padding-box内的图片内容将统统不可见。尽管图片是从边框开始显示。

    3、背景尺寸(background-size)

        1).length: 长度值---第一个值设置宽度,第二个值设置高度
        2).percentage: 百分比---第一个值设置宽度,第二个值设置高度
        3).cover:等比缩放到完全覆盖容器,背景图像有可能超出容器

        4).contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

    4、透明背景(rgba)
        background:rgba(255,0,0,0.6)

        background-color:rgba(255,0,0,0.6); RGB Red Green Bule 3色!即255, 0, 0 三色的值混合.最后一个参数.0.6 则是指的透明度!1为100% 不透明!

    二、渐变背景

    1、渐变种类

        线性渐变:linear-gradient

        径向渐变 radial-gradient

    2、语法:
        渐变:background:-webkit-linear | radial-gradient (水平起点 垂直起点 || 角度, 颜色1  0%, 颜色2  渐变到的位置百分比%, ... ,颜色N 100%);
        线性渐变&&径向渐变
        -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* );
        例如:
    background:radial-gradient(at 55px 55px, #fff  1%,#000 100%);

    background:-webkit-radial-gradient(50px 50px,#fff  1%,#000 100%);

        -webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*); 

        例如:background:linear-gradient(to bottom,#000 0%,#fff 36%,#000 100%);

        注:在线性渐变过程中,颜色沿着一条直线过渡:从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。

        径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化,而是从一个起点朝所有方向混合。但相对线性渐变要比径向渐变复杂的多。

    三、蒙版

    1、蒙版知识点

    1).可以使用图片或渐变作为遮罩层

    -webkit-mask-image:url | gradient 
    -webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat
    -webkit-mask-position:x y;
    -webkit-mask-clip:border | padding | content

    -webkit-mask-origin:border | padding | content 

    简写:-webkit-mask:url("04.png")  40px  55px  no-repeat;

    目前只有webkit浏览器支持mask遮罩层

    2、WEB中mask属性特点

        形状主要控制的是显示区域
        颜色对蒙版没有任何的影响

        透明度为显示图像的透明度


    展开全文
  • css 实现蒙版效果

    万次阅读 2016-11-08 10:28:16
    样式: .back {background:url(images/coupon-logo.gif) no-repeat;} .top {height:100px;background-color:#fff;filter:Alpha(Opacity=60);opacity:0.6;} </style>html<div class="back"> <div clas

    样式:

    <style>
        .back {background:url(images/coupon-logo.gif) no-repeat;}
        .top {height:100px;background-color:#fff;filter:Alpha(Opacity=60);opacity:0.6;}
    </style>

    html

    <div class="back">
        <div class="top"></div>
    </div>

    关键代码
    background-color:#fff;filter:Alpha(Opacity=60);opacity:0.6;

    展开全文
  • CSS3蒙版/遮罩、倒影

    千次阅读 2017-10-29 18:30:20
    蒙版/遮罩mask 很简单的一个属性,并不是PS里面的那个蒙版 蒙版目前只有-webkit-内核的浏览器支持(谷歌、Safari、新欧朋opera),其他不支持 需要png的透明度遮罩 -webkit-mask-image:url("png的图片,需背景...

    蒙版/遮罩mask

    很简单的一个属性,并不是PS里面的那个蒙版

    蒙版目前只有-webkit-内核的浏览器支持(谷歌、Safari、新欧朋opera),其他不支持
    需要png的透明度遮罩
    -webkit-mask-image:url("png的图片,需背景透明"),和背景设置一样,可以设置多个png图为蒙版
    我这里用的png图是一个小星星:

    效果图:

    哈哈哈,是不是很神奇呀,啦啦啦~

    倒影-webkit-box-reflect

    倒影目前只有-webkit-内核的浏览器支持(谷歌、Safari、新欧朋opera),其他不支持
    例如:-webkit-box-reflect:right/left/blow/above 10px url("图片路径"));
    第一个值:倒影方向
    第二个值:倒影与本体之间的距离,为具体的数值
    第三个值:可以是透明度的渐变,也可以是一个png透明的图片
    这里给一个透明色渐变的例子:
    -webkit-box-reflect:below 10px -webkit-repeating-linear-gradient(90deg,rgba(255,255,10,1),rgba(10,255,255,0.5));
    效果图:


    展开全文
  • CSS3为图片增加蒙版

    千次阅读 2017-07-30 14:10:03
    HTML代码 青少年口语 //蒙版上的文字 青少年口语 //图片下的标题 CSS代码: .circle-border { background-color: transparent; //背景透明无颜色 } .img-
  • css为图片添加一层蒙版

    万次阅读 2018-05-18 16:27:50
    如图所示,我们需要将左边的图片展示为右边的图片效果,即为图片添加一层黑色的蒙版 要实现当前效果,我们需要在img外面加一层div&lt;div class="dimback"&gt; &lt;img src="#" ...
  • 蒙版css技巧

    2019-06-16 06:58:19
    2019独角兽企业重金招聘Python工程师标准>>> ...
  • CSS3 遮罩蒙版效果 分栏效果

    万次阅读 2015-09-07 21:22:21
    mask遮罩蒙版效果 来看一下效果图: 这是两张原图: 遮罩层图像 注意,白色区域为透明状态 要展示的图像   使用mask之后产生的效果图   首先来解释一下遮罩、蒙版。和PS中的蒙版...
  • 给div添加蒙版(遮罩?)

    千次阅读 2018-04-16 16:15:42
    我是一个蒙版(遮罩?)&lt;/p&gt;&lt;img src="/images/hellokitty.png"&gt;&lt;/div&gt;/*css文件*/div{width: 80%;height: 100%;background: #efefef;-moz-opacity:0.8;...
  • css: js: document.getElementById("monRentCar1").style.display = "block"; 重点思考: 1、主要实现就是将display由none动态修改为block; 2、样式设置很重要,按需求实现想要的效果。其中position属性最...
  • filter滤镜实现img图片的CSS蒙版效果、模糊效果 项目中我们经常会遇到这样的需求:图片在鼠标经过或者悬停的时候,出现一层模糊的蒙版效果。 这里将会用到:filter这一属性。 文章目的:总结一下该属性...
  • CSS实现 全屏 遮罩

    千次阅读 2017-09-12 11:05:48
    CSS实现 全屏 遮罩   遮罩 CSS: .divBG { background: gray; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; display: none; z-index: 20; filte
  • CSS背景蒙版兼容IE】

    千次阅读 2017-06-04 00:19:48
    CSS背景蒙版兼容IE】 蒙版 background-color: rgba(255,255,255,0.35); 蒙版兼容IE background: #fff; opacity: 0.35; //谷歌等现代浏览器 filter: alpha...
  • 前端页面加蒙版的几种方法

    千次阅读 2019-05-27 12:07:26
    以下个人整理了几种添加蒙版介绍 one 采用定位的父子级别加蒙版,采用子绝父相对的方式,需要注意层级性。 <!--模板以下均是这个模板--> <div class="wrap"> <!--<div class="mark"><...
  • css3渐变透明遮盖

    千次阅读 2018-07-17 09:09:09
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0)), to(#fff)); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), #fff); background: -o-linear-gradi...
  • css3的新属性遮罩蒙版mask

    千次阅读 2017-10-18 14:46:38
    效果 我们可以看出其实他是有两个图片拼成的。 + 这个是剪切的一个图片让他成蒙版的形状。你也可以用文字来实现。
  • 如下图 ...其实做个蒙版很容易拉,这是css的写法。 .mban{position:fixed;z-index:16;top:0;left:0;width:100%;height:100%;background:#000;filter:alpha(opacity=50);-moz-opacity:0.5;opacity
  • vue-蒙版引导-driver.js

    千次阅读 2019-05-05 16:20:23
    1,driver.js 新用户引导 ...模型大致如下图: 2,代码如下: import Driver from 'driver.js' // import driver.js import 'driver.js/dist/driver.min.css' // import ...
  • jquery实现loading蒙版加载

    千次阅读 2018-08-01 18:10:21
    lt;div id="scbackground" class="background"...css:(loading-new.gif是加载的动态图,可以在网上找) &lt;style type="text/css"&gt; .background { display: bloc
  • 说明CSS中的mask属性允许用户屏蔽或剪裁特定点的图像来实现,部分或完全隐藏某个元素的可见性。 好吧,这个概念可能有点不好理解,先看图。 看了这个等式,似乎明白点什么了吧,朋友们,第一张图就是一张普通的图,...
1 2 3 4 5 ... 20
收藏数 1,913
精华内容 765
热门标签
关键字:

css蒙版