精华内容
下载资源
问答
  • CSS半透明遮罩层 and 定位

    千次阅读 2019-03-16 11:47:23
    -- 半透明遮罩层 --> <div class="mask" style="display: none;"></div> css .mask{ position: fixed; left: 0; top: 0; width: 100%; height: ...

    html

    <!-- 半透明遮罩层 -->
    <div class="mask" style="display: none;"></div>
    

    css

    .mask{
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 100;
        display: none;
    }

     

    jQuery

    $('.mask').fadeIn();    //淡入展示
    $('.mask').fadeOut();   //淡出消失
    
    

    定位

    .wechat_header{
        margin-top: 30px;
        position:relative;
    }
    .wechat_header .wechat_close{
        position: absolute;
        top: 0;
        right: 0;
    }

    wechat_close相对于wechat_header定位

    原文链接:CSS半透明遮罩层 and 定位

    个人博客:www.liusongs.com

    展开全文
  • HTML5+CSS3 制作的图片半透明遮罩效果
  • css半透明遮罩

    千次阅读 2018-05-27 22:21:22
    半透明遮罩 使用场景 常用于新手引导 效果图 实现方式 页面 + 半透明灰色背景 + 高亮图片层 &amp;amp;lt;div id=&amp;quot;app&amp;quot;&amp;amp;gt; &amp;amp;lt;img src...

    1. 背景

    在我们做新手引导时,经常需要使用半透明背景来提示软件的使用方法,本来将描述如何实现这种半透明的效果。

    2. 效果图

    这里写图片描述

    3. 实现方式

    3.1 页面层 + 高亮透明圆

    在这里插入图片描述

    <div id="app">
      <img src="small-bird.jpg" title="image" />
      <p>半透明聚光灯效果</p>
      <div class="layer">
        <div class="circle"></div>
      </div>
    </div>
    
    #app {
      color: red;
    
      & > img {
        width: 100px;
        height: 100px;
        vertical-align: top;
        margin: 12px 20px 12px 30px;
      }
    
      .layer {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        text-align: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
    
        & > .circle {
          margin-left: 10px;
          width: 120px;
          height: 120px;
          border-radius: 120px;
          box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
        }
      }
    }
    

    在线 DEMO(请确保网络正常):jsfiddle

    3.2 页面层 + 遮罩层(半透明背景 + 透明块 + 半透明背景)

    在这里插入图片描述

    <div id="app">
      <img src="small-bird.jpg" title="image" />
      <p>半透明聚光灯效果</p>
      <div class="layer">
        <div class="content">
          <div class="circle"></div>
          <div class="right-side"></div>
        </div>
        <div class="footer"></div>
      </div>
    </div>
    
    #app {
      color: red;
    
      & > img {
        width: 100px;
        height: 100px;
        vertical-align: top;
        margin: 12px 20px;
      }
    
      .layer {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        text-align: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
    
        & > .content {
          display: flex;
    
          & > .circle {
            width: 130px;
            height: 120px;
          }
    
          & > .right-side {
            flex: 1;
            background-color: rgba(0, 0, 0, 0.6);
          }
        }
    
        & > .footer {
          flex: 1;
          background-color: rgba(0, 0, 0, 0.6);
        }
      }
    }
    

    在线 DEMO(请确保网络正常):jsfiddle

    展开全文
  • 一款非常漂亮的CSS3鼠标悬停图片半透明渐变颜色背景遮罩动画特效,当鼠标滑过图片时,图片上方会覆盖一渐变颜色的蒙版,移开图片蒙版又会以渐变的方式消失,视觉效果相当好看。
  • CSS 半透明遮罩层

    2021-03-07 18:19:58
    很多时候,我们需要通过一层半透明遮罩层来把后面的一切整体调暗,以便凸显某个特定的UI元素,引导用户关注,比如弹出层或者交互指南。这个效果的传统方法就是增加一个额外的HTML元素用于遮挡背景添加如下样式:....

    很多时候,我们需要通过一层半透明的遮罩层来把后面的一切整体调暗,以便凸显某个特定的UI元素,引导用户关注,比如弹出层或者交互指南。

    这个效果的传统方法就是增加一个额外的HTML元素用于遮挡背景添加如下样式:

    .overlay {

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background-color: rgba(0,0,0,.8);

    }

    .lightbox { /*需要引起用户注意的元素*/

    position: absolute;

    z-index: 1;

    }

    .overlay 遮罩层负责把这个元素背后所有的东西调暗。.lightbox需要指定一个更高的z-index,一边绘制在遮罩层的上层。这个方法的优点:稳定可靠,缺点:需要增加额外的HTML。那怎么由CSS单独实现呢?

    box-shadow方案

    我们可以用伪元素消除额外的HTML元素,比如:

    body.dimmed::before {

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 1;

    background: rgba(0,0,0,.8);

    }

    缺点: 移植性不好,

    元素上可能有其他需求已经占用了 ::before元素,而且使用这个效果需要JS 给添加dimmed这个类,如果把遮罩层交给元素自己的::bofore伪元素来实现,就可以弥补不足。给伪元素设置z-index:-1;就可以让它出现在元素的背后。尽管这解决了可移植的问题,但无法对遮罩层Z轴层次进行细粒度的控制,它可能出现在这个元素之后(期望的),但也可能出现在这个元素的父元素活着祖先元素之后。这个方法还有一个问题,伪元素无法绑定独立的JS事件处理函数。

    box-shadow方案

    具体做法就是生成一个巨大的投影,不偏移不模糊,简单拙劣的模拟遮罩层效果:

    box-shadow: 0 0 0 999px rgba(0,0,0,.8);

    为了确保遮罩层总是可以覆盖视口,我们换用视口单位来解决它。因为我们无法分开制定的水平和垂直方向的直径,所以这里最合适的视口单位为vmax。1vmax相当于1vw和1vh两者中较大值,因此满足我们需求的最小值就是50vmax。由于投影是同时向四个方向扩展的,这个遮罩层的最终尺寸将是100vmax加上元素本身的尺寸。

    position: fixed;

    top: 50%; left: 50%;

    margin: -200px;

    box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);

    缺点: 如果页面很长而为此扩大投影的扩张半径就不太明智。

    优点:可以有限度的使用该技巧,比如配合固定定位来使用,或者当页面没有滚动条时再用。

    backdrop 方案

    如果你想引导用户关住的元素就是一个模拟的元素,(元素可以由它的showModal()方法显示出来),那么根据浏览器的默认样式,它会自带一个遮罩层。借助::backdrop伪元素,这个原生的遮罩层可以设置样式的,比如可以把它变的更暗一些:

    Click me

    O HAI!

    Close

    dialog::backdrop { background: rgba(0,0,0,.8)}

    缺点:浏览器对其支持比较有限,再次使用之前,确认一下兼容性的问题。

    优点:尽管浏览器还不支持,对话框没有遮罩层也不会导致任何功能的缺失,因为它只是用户体验的增强手段而已。

    展开全文
  • css遮罩层 半透明

    2021-06-08 17:18:35
    如何用css实现半透明遮罩层效果z-index:2000; //使遮罩层在其他层之上 opacity:0.5; //透明度,取值范围 0-1CSS遮罩层不能完全遮罩页面母版页和母版页里的内容页都不能实现完全遮罩。下面红线里面都是没完全CSS遮罩层...

    如何用css实现半透明遮罩层效果

    z-index:2000; //使遮罩层在其他层之上 opacity:0.5; //透明度,取值范围 0-1

    CSS遮罩层不能完全遮罩页面

    33058b0338ddfc8e6aea7e462320e383.png

    母版页和母版页里的内容页都不能实现完全遮罩。下面红线里面都是没完全CSS遮罩层不能完全遮罩页面,是设置错误造成的,解决方法如下:

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

    然后看下样式定义,先看下图片容器和图片的样式,如图,其中要注意的是img_container

    css怎么让子不继承父元素的透明度,就是遮罩层怎么如果你需要做成背景透明的话,建议使用background-color:rgba(x,x,x,y),最后一个y就是透明度0~1,希望帮到你

    css如何实现动态模糊遮罩效果

    像win10开始菜单那种效果,我想做成网页固定的导航菜单,被导航遮住的内不是很明白你要的是什么效果,既然是导航,本来z-index就会高于内容,不会影响误操作到内容,没必要做遮罩层。鼠标放到哪,哪模糊,用a:hover实现就行了,你如果要遮罩整个界面而不只是导航下面那部分,那做一个遮罩层就行了,做成半透明。

    css如何实现鼠标移至图片上显示遮罩层及文字

    方法一:鼠标移至图片上显示遮罩层及文字

    然后看下样式定义,先看下图片容器和图片的样式,如图,其中要注意的是img_container样式里定义了position:r

    如何用css或js jq在不是背景的图片上面加一层即透ie下面高版本的渐变又透明的才行。没法透明,可以考虑使用透明png。 rgba最后面的那个1可以改为0.8试试看,就变成透明的了。。 #box{width:200px;height:200px;overflow:hidden;position: relative;}#box span{display: block;width:100%;height

    用css,jsp做了一个半透明背景层(遮罩层),参考lo...鼠标移动到菜单栏上下面显示二级菜单,二级菜单有个半透明背景层,目前CSS使用rgba可以使背景色透明文字不透明,你使用的透明会使背景和文字一起透明。

    div css显示问题。透明度和遮罩,急急急

    这个是导航的背景好吧,没必要用遮罩这么麻烦。 在CSS中,alpha是来设置透明度的。 先来看一下它的表达格式: filter:alpha(opacity=opcity,finishopacity=finishopacity, style=style,startX=startX,startY=startY,finishX=finishX。

    JS+CSS如何避免透明遮罩层对中间层的影响

    可以将遮罩层放在 内容层的外面。即遮罩层和内容成是兄弟关系,不是父子关系

    可以采用透明背景色,即八位数的颜色代码。

    展开全文
  • 主要介绍了使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享,编写半透明遮罩层时要注意定位问题、不要满屏遮罩,需要的朋友可以参考下
  • 主要介绍了JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法,详细分析了弹出遮罩层效果的实现方法以及完整的实例代码,需要的朋友可以参考下
  • css半透明遮罩层

    2017-08-31 16:55:00
    1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8">...半透明(用在遮罩层)</title> 6 <style type="text/css"> 7 *{ margin:0; padding:0;} ...
  • 一般情况下,让一个图片有超链接,可以用a标签把 img包住,但是要做hover鼠标经过显示黑色半透明遮罩层如果用定位的话,定位的半透明遮罩层就会把图片遮住,以至于鼠标经过没有小手指,也点不到链接,所以这里给出一...
  • 使用元素的opacity 属性,设置遮罩层的效果, 主要 样式是:background-color: #ooo; opacity:0.3;dfaaf原因分析:使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也...
  • 这是一款使用纯css3制作的图片点击弹出动画遮罩层效果。该动画遮罩层demo中为模板展示,当点击模板图片后,图片缩小并在图上方弹出半透明遮罩层,显示模板各个模块的功能。
  • 在网页中通过div+css实现半透明效果不难,在winfrom中实现的方法,C#自定义控件半透明遮罩层
  • div半透明遮罩效果

    2021-06-08 16:12:41
    css如何实现鼠标移至图片上显示遮罩层及文字1.首先看看HTML、一个img图像控件和一个带掩码样式的div,其中包含文本。这是蒙版层。 2.然后,查看样式定义。首先,查看图像容器和图像的样式,如图所示。这主要是准备...
  • 主要介绍了JavaScript制作点击查看大图的页面遮罩层效果实例,透明部分这里使用的是CSS3的rgba,兼容性还是过得去的,需要的朋友可以参考下
  • 鼠标经过弹出透明遮罩层css写法

    千次阅读 2016-12-08 18:43:37
    .ai_demo{width: 250px; height: 250px; background:url("http://www.magpet.cn/images/upload/Image/87076179_snap(25).jpg") no-repeat scroll 0 0/100% 100% content-box content-box; background:url("http://w
  • 现在我们来看看这种半透明遮罩效果应该怎么实现。大致的思路是在body上面放置2个,一个是半透明的,遮盖整个屏幕;另一个是显示你要显示的内容的。需要注意的是:这两个的position都要设为absolute;,因为只有设...
  • 点击按钮,出现半透明遮罩层弹框,说说自己之前发过的愁吧1、遮罩层半透明了 弹框也跟着半透明了 就像这样 绝望吧是哪里错了呢?你的css是这样写的吧:应该这样:需要注意的是这几个参数的意思:RGB Red Green Bule ...
  • html代码很简单 1 、半透明效果可以使用 css3 中的 opacity 属性,在低版本的IE浏览器中使用IE的alpha 滤镜。代码:.opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; }2 、要覆盖整个可视...
  • WinForm实现半透明遮罩层

    千次阅读 2019-04-28 14:47:00
    在Winform窗体中实现半透明遮罩层比在网页中通过div+css实现半透明效果更复杂更难,网上方法有很多,但是我用的解决方法是弹出一个新窗口并且调整它的透明度,然后遮罩住原来的窗口,使用户不能对原来的窗口进行操作,...
  • CSS中的伪类可以更方便的帮助我们定义过渡效果,这里,我们详细介绍一下利用:hover实现遮罩层效果。:hover是指当鼠标悬停在元素上时所发生的效果。 实现遮罩层的步骤 需要两个相等大小的元素。 两个元素的位置应该...
  • 在实际开发中经常会遇到对图片加一层半透明遮罩,然后上面显示文字说明的需求。 如下图: 如何实现呢?看代码! 需要把图片放到一个父容器中,为父容器设置背景色为黑色background: #000;,再为图片本身添加一...
  • css设置遮罩层背景颜色透明度渐变

    千次阅读 2020-08-25 14:34:53
    css设置遮罩层背景颜色透明度渐变 css代码 background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
  • css-实现鼠标移至图片上显示遮罩层

    万次阅读 多人点赞 2018-05-09 20:36:37
    1、将遮罩层html代码与图片放在一个div 我是放在 .img_div里。 &lt;div class="img_div"&gt; &lt;img src="./images/paella-dish.jpg"&gt; &lt;a href="#"&...
  • div+css实现图片底部透明遮罩文字标题HTML代码 ...div+css实现图片底部透明遮罩文字标题CSS代码 .class_outer { display: block; width: 546px; height: 276px; margin: 10px auto; position: relative; ove
  • 在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Code using System; using System....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,457
精华内容 582
关键字:

css图片半透明遮罩层