精华内容
下载资源
问答
  • vue设置遮罩层 怎么防止底层滚动

    千次阅读 2019-04-25 01:04:23
    <template> <div> <div id="contain" :class="showBanner?'active':''"> <div class="head center"> <p class="bigtitle blue">冠品小...
    <template>
        <div>
            <div id="contain" :class="showBanner?'active':''">
                    <div class="head center">
                        <p class="bigtitle blue">冠品小传</p>
                        <p class="sub">冠品中国成立于1999年,是工业流体设备智能集成服务商, 也是工业涂装领域电商的领先厂商。</p>    
                    </div> 
            </div>
            <!--轮播弹层-->
            <div class="mask" v-if="showBanner"></div>
            <div v-if="showBanner" class="slider" style="width:640px;hieght:1000px; margin:100px auto;">
                <el-carousel :interval="3000" indicator-position="outside" loop="true" arrow="never" height="960px">
                    <el-carousel-item v-for="item in piclist" :key="item.id" class="slider-imgBox">
                        <img class="slider_img" :src="item.imgurl">
                    </el-carousel-item>
                </el-carousel>
                <div class="button" @click="handleClick">
    				<!-- <image class="close" src="/static/close3.png"  lazy-load></image> -->
    				<span>关闭</span>
    			</div>
            </div>
        </div>
    </template>
    <script>
    import banner1 from '../assets/1.png'
    import banner2 from '../assets/2.png'
    export default{
        data(){
            return {
               showBanner:true,
               piclist:[
                   {id:1,imgurl:banner1},
                   {id:2,imgurl:banner2}
               ]
            }
        },
        watch:{
           
        },
        mounted(){
            this.closeMask()
        },
        methods:{
            handleClick(){
    		this.showBanner = false;
    	  },
    	  closeMask(){
    	  	let that = this;
    	  	setTimeout(()=>{
    	  		that.showBanner = false
    	  	},6000)
    	  }
    	}
    
    }
    </script>
    、、、  
    ##css:
        .active{
          overflow: hidden;
          height:100vh!important;
        }
    复制代码

    转载于:https://juejin.im/post/5cc106a85188252c3314b556

    展开全文
  • 现在大部分的网站,在我们点开一些活动页面是都会弹出一个类似...通过css设置两个容器在同一位置,然后使用css设置其中一个容器透明度即可实现遮罩层。css做遮罩层示例:先看下我们的html,很简单,一个img图片控件...

    现在大部分的网站,在我们点开一些活动页面是都会弹出一个类似领取红包,奖品等活动信息。也就是一个遮罩层,而实际上这遮罩层就是由简单的css来实现的。下面我们来看一下css如何做遮罩层。

    css使用可以使用opacity属性或rgba属性来实现遮罩层。通过css设置两个容器在同一位置,然后使用css设置其中一个容器透明度即可实现遮罩层。

    css做遮罩层示例:

    先看下我们的html,很简单,一个img图片控件,和一个有mask样式的div,里面有文字,这个就是遮罩层。

    然后看下样式定义,先看下图片容器和图片的样式,如图,其中要注意的是img_container样式里定义了position: relative;这个主要是为了让我们的遮罩层做绝对定位做准备的。

    再看下遮罩层的样式定义,代码如图,其中需要注意的是他的定位样式,我们设置了absolute的绝对定位,另外还有半透明的background样式设置:background: rgba(0, 0, 0, 0.7);

    可以通过修改后面的0.7这个数字来改变透明度。1为完全不透明,0为完全透明。

    接着添加鼠标移动上去显示遮罩层的脚本代码。这个js代码用jquery来写,方便,简单一点,所以我们先引入jquery脚本库。

    添加mouseover,mouseout事件,主要就是当鼠标移动到图片容器上时,显示遮罩层,移出时,隐藏遮罩层。代码如图

    展开全文
  • 那么我们该怎么设置关闭任务栏的预览窗口呢?下面就让我们一起来看看具体的设置关闭方法吧。首先,点击电脑屏幕左下角的微软图标,点击进入开始菜单中的运行项;或直接使用组合键“win+R”打开运行页。在弹出的运行...

    5e6aefd9d9fe02b291b371ec18fab017.png

    我们日常在使用win10系统电脑打开多个任务后,鼠标经过任务栏上的任务图标,就会出现对应的预览窗口。这一功能对于大多数用户来说都是挺方便的,但也有一些用户会不喜欢这样的预览窗口设置。那么我们该怎么设置关闭任务栏的预览窗口呢?下面就让我们一起来看看具体的设置关闭方法吧。

    8434536abfe71afa81edaee729fe7d87.png

    首先,点击电脑屏幕左下角的微软图标,点击进入开始菜单中的运行项;或直接使用组合键“win+R”打开运行页。

    85ca0faf8fb91a89247fb492d58b2940.png

    在弹出的运行页对话框中输入“regedit”,以打开注册表编辑器。

    f4eaa02a0adaf873348c3d2bcce0fb10.png

    在打开的注册表编辑器路径框内输入

    “HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionExplorerAdvanced”,直接定位到“Advanced”文件夹处。

    034ec77e8fd02ee02d1b2d6cf0204828.png

    然后在“Advanced”文件夹右侧右键点击空白处,打开新建菜单,选择“DWORD(32位)值”项,并将新建的项重命名为“ExtendedUIHoverTime”。

    546292a717ce0dbb8d7b91a4a3cf49f4.png

    2bda4eb4eab7dd8da7f036674fd4f1ae.png

    双击新建的项,进入设置页将其数值修改为“9000”,然后点击确定。

    ab175c4666c299b586ff4ddedbca5e40.png

    然后使用同样的方法,在路径框中输入

    “HKEY_CURRENT_USERSOFTWAREMicrosoftWindowsCurrentVersionExplorerTaskband”直接定位至“Taskband”文件夹。

    f1b37c299f3fcea0217e432400785122.png

    右侧空白处右键点击打开新建菜单,选择“DWORD(32位)值”项,并将新建的项重命名为“NumThumbnails”。

    84f9eacdb6dfcf4c111af67ce7e79f78.png

    d0345461b20bea6e9c6419ce2b14aa4b.png

    再同样的双击新建的项,进入设置页将其数值修改为“0”,点击确定。

    4706f7604c3188d94e0df1280ffe78b9.png

    完成以上设置步骤,最后重启电脑,我们的任务栏预览窗口就关闭啦。

    展开全文
  • 原理:用z-index设置和div的层级,蒙在div下面,点击div的时候,不会触发蒙点击事件 前提。蒙和div不是嵌套关系。 子div点击事件阻止冒泡: event.stopPropagation(); ...

    原理:用z-index设置蒙层和div的层级,蒙层在div下面,点击div的时候,不会触发蒙层点击事件

    前提。蒙层和div不是嵌套关系。

     

    子div点击事件阻止冒泡:

    event.stopPropagation();

    怎么显示下层的内容

    设置:background: transparent;

    或    opacity: 0;(但是如果有其他内容会影响显示)

    展开全文
  • 突然设计搞了一种想法,当遮罩层谈起来的时候,能不能搞一种模糊让用户看不清遮罩层下面的内容 然后ui小姐姐说,要是做不出来 就不做了,我说能做出来,怎么能让ui小姐姐看不起呢 先看下 加模糊滤镜之前的效果 ...
  • 有谁用过鸿洋GitHub上的HighLight?我想问一下,怎么设置遮罩层透明背景的透明度?
  • 小球融合新建合成设置如下:2. 绘制形状,对齐放中间3. 绘制黄色圆形,定位点工具移动到圆心。(按住shift可自动吸附)4. 修改图层名称便于识别(选中图层按回车修改)5. 为图层添加位移动画6. 先点亮位置前面的小...
  • 我做了一个简单的地图的思想,就是地图分层3层:背景层、可行区域层、遮罩层,但是地图就不寻路了,通过设置可行区域层来 实现地图障碍物的方法。下面看一个视图,我把地图详细的分层了: OK,有了这个思路,...
  • 让某个图片或者Div悬浮在别的对象之上,一般的方法是用CSS的z-index来定义。z-index的数值越大,对象越在上面...但是,无论怎么设置z-index,你的对象总是在Object对象下面。要想解决让Div覆盖Flash Object的问题...
  • 两个div,想让遮罩显示出来的时候正好盖住div2,div2设置了height百分比,是会随浏览器的高度自动变化的,怎么设置遮罩也正好是盖住div2变化呢? 解决方案 function btnLeftOnclick() { var div = document....
  • 之前有说个一个写div,遮罩层的思路(可以参考之前的文章)二、解决方案因为整体使用的是layui,所以就考虑使用layui本身实现其功能。网上查了相关资料,然后这里记录下三、直接贴代码吧layer.open({type:...
  • 在做web开发中可能会遇到flash遮挡页面中元素的情况,无论怎么设置flash容器和的深度(z-index)也无济于事,现有的解决方案是在插入flash的embed或object标签中加入”wmode”属性并设置为wmode=“transparent”或”...
  • 在我们做营销活动或推广宣传的时候,容易遇到域名被封,无法跳转app下载等情况。...目前ios只能通过遮罩层来提示用户,对于安卓可以直接跳转外面默认浏览器,下面就分别介绍下这2种方式的实现代码。 ...
  • 当图片弹出框弹出的时候,就出现了最外层的一个蒙版,当然和层级肯定是有关的, 但是怎么设置z-index都不行。 最终解决方式。是在弹出框加一个 append-to-body 属性,因为第一 弹出框没有被遮罩住,而第二...
  • Flex嵌入到HTML中切换...分类: Flex4 2011-07-05 20:06 7人阅读 评论(0) 收藏 举报 ...类似在所有html元素的总父容器上一,无法被任何html元素遮挡。 无论怎么设置flash容器和的深度(z-index)也无济于事。 遇到这
  • <title>CSS3鼠标悬停图片遮罩层动画特效 <!--bootstrap布局框架--> <!--字体图标样式--> body{background-color: #353535} .box { font-family: 'Ubuntu', sans-serif; overflow: hidden; ...
  • ... 弹出的div被dropdownList(select)...已经将dropdownList 放入了中,设置了Z-INDEX ,但是,div 还是被dropdownList挡住了。用iframe遮罩也不行(不知道是不是我没有理解),但是最好不要用iframe遮罩,谁能解决一下...
  • Tips:虽然代码有点长,但是你只需要改掉一个图片链接再下载个jQuery.js就可以得到要展示的效果。 话不多说,先上效果图 ... 今晚找了很多博客都讲不清楚,所以自己就动脑子想想怎么做吧。...1.设置遮罩层d...
  • 我做了一个简单的地图的思想,就是地图分层3层:背景层、可行区域层、遮罩层,但是地图就不寻路了,通过设置可行区域层来 实现地图障碍物的方法。下面看一个视图,我把地图详细的分层了: OK,有了这个思路,...
  • 我做了一个简单的地图的思想,就是地图分层3层:背景层、可行区域层、遮罩层,但是地图就不寻路了,通过设置可行区域层来 实现地图障碍物的方法。下面看一个视图,我把地图详细的分层了: OK,有了这个思路,大家...
  • 我做了一个简单的地图的思想,就是地图分层3层:背景层、可行区域层、遮罩层,但是地图就不寻路了,通过设置可行区域层来 实现地图障碍物的方法。下面看一个视图,我把地图详细的分层了:   OK,有了...
  •  我做了一个简单的地图的思想,就是地图分层3层:背景层、可行区域层、遮罩层,但是地图就不寻路了,通过设置可行区域层来实现地图障碍物的方法。下面看一个视图,我把地图详细的分层了:    OK,有了这...
  • 2.12 动画系统进阶

    2017-09-09 19:38:27
    day12 动画系统进阶 一,动画 在 Unity 中可以使用动画来管理不同类型的...当设置完动画,有些动作并冲突,怎么同时运行呢?这里就需要动画遮罩. 在 Project面板下创建一 个 Avatar Mask 红色为禁用,这
  • 比如:带有遮罩层效果的提示框、固定层效果、全屏广告等等。 流式布局:让布局脱离固定值限制,可以根据页面情况改变相应发生改变 vue用什么写的: 怎么跟后端商量命名接口的,接口定义成什么格式: 定好接口...
  • 在使用el-dialog,发现无论怎么做,...点击按钮时,发现遮罩层已经出来了,但对话框没有显示. 经查,缺少属性append-to-body,将该值设置为true即可 <!--审批悬浮框--> <el-dialog class="el-dialog__width" ...

空空如也

空空如也

1 2
收藏数 40
精华内容 16
关键字:

怎么设置遮罩层