`
Virgo_S
  • 浏览: 1151064 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

制作css半透明的浮动层

    博客分类:
  • CSS
阅读更多
html代码:

<div id="wrap">
    <div id="box">
      <a href="http://www.52css.com/" target="_blank">我爱CSS</a><br/>
      <strong>致力于Web标准在中国的应用及发展</strong>          
    </div>
</div>


css代码:
#box {
    width:300px;
    height:150px;
    filter:alpha(opacity=60);
    opacity:0.6;
    margin-top:100px;
    margin-left:50px;
    background:#fff;
    border:1px #000 solid;
    padding:20px;
    font-size:14px;
    line-height:170%;
}
分享到:
评论

相关推荐

    点击弹出浮动层 弹出遮罩层

    这种效果通常应用于需要显示详细信息、模态对话框或菜单等场景,用户点击某一元素后,一个半透明的遮罩层会覆盖整个页面,同时一个浮动层(通常包含更多信息或功能)在屏幕中央出现。以下是对这个主题的详细解释: ...

    html+css透明背景

    以上代码将创建一个独立浮动的半透明背景,同时保持内容层的不透明。需要注意的是,这种方法可能会影响其他元素的布局,因此在实际应用中应谨慎调整。 在压缩包文件“透明背景”中,可能包含了用于演示或测试这些...

    jQuery精美浮动层效果

    它可以是半透明的背景,中间有一个突出显示的框,或者只是一个在页面上独立移动的元素。浮动层通常用于登录注册、广告展示、通知提醒等场景。 实现jQuery浮动层效果的关键步骤包括: 1. **引入jQuery库**:首先,...

    CSS3实现透明白块漂浮动画特效.zip

    这个效果主要是通过一系列半透明的方块以动画的形式向上浮动,为网页添加生动有趣的视觉体验。接下来,我们将详细讨论CSS3中涉及的关键技术和实现方法。 首先,CSS3(Cascading Style Sheets Level 3)是样式表语言...

    CSS3制作文字半透明倒影效果的两种实现方式

    `::after`伪元素则用于创建一个半透明的遮罩层,通过线性渐变从完全透明渐变到完全不透明,以模拟反射底部的边界。这种方法的优点在于它具有更好的浏览器兼容性,适用于Firefox和Opera等不支持`box-reflect`的浏览器...

    jquery万能浮动层

    2. **多种展示模式**:支持模态(Modal)和非模态(Non-modal)两种模式,模态浮层会在页面上遮罩一层半透明背景,强制用户与其交互后才能继续操作;非模态则允许用户同时操作其他部分的页面。 3. **丰富的动画效果*...

    弹出登录框的JQuery弹出浮动层

    浮动层,又称为模态窗口或对话框,是在网页主内容上覆盖的一个半透明或者全屏的元素,用于显示特定的信息或执行特定的操作,如登录、注册、确认等。这种设计方式可以避免用户在多页面间跳转,保持用户操作的连贯性。...

    jQuery弹出层与浮动层

    通过设置`modal: true`属性,我们可以创建一个模态对话框,它会在页面上创建一个半透明的遮罩层,阻止用户与背景交互。 2. Bootstrap Modal: Bootstrap是一个流行的前端框架,其Modal组件同样提供了弹出层功能。...

    漂亮的半透明计算器

    【漂亮的半透明计算器】 在数字化时代,计算器作为一个实用的工具,已经从物理设备发展到软件应用,甚至在网页上也有其身影。"漂亮的半透明计算器"是一个基于JavaScript实现的轻量级计算器,它模仿了Windows操作...

    JavaScript点击按钮后弹出透明浮动层的方法

    在探讨JavaScript点击按钮后弹出透明浮动层的方法时,主要涉及到的技术点包括DOM操作、CSS样式应用和事件监听。以下是对这些知识点的具体说明: 1. DOM操作:文档对象模型(DOM)是HTML和XML文档的编程接口,它允许...

    一个半透明效果的弹出框

    在HTML和CSS中,我们可以使用`opacity`属性或者`rgba()`函数来设置元素的透明度,以此达到半透明效果。例如: ```css .pop-up { background-color: rgba(255, 255, 255, 0.8); /* 白色背景,80%的不透明度 */ ...

    使用浮动透明层来提示信息

    背景颜色`rgba(0, 0, 0, 0.5)`表示半透明黑色,`color: white;`确保文字在背景上清晰可见,`padding`则是内部边距,提供内容与边框之间的空间。 接下来是`xl.png`,这可能是一个图标或示例图片,用于增强提示信息的...

    jQuery浮动层点击图标按钮关闭或展开

    浮动层,通常称为弹出框或对话框,是一种在网页主内容上覆盖一层半透明或全屏的元素,用于显示额外信息或进行特定操作。 首先,要实现这个功能,我们需要理解jQuery的选择器和事件绑定。选择器是jQuery的核心部分,...

    半透明模式对话框类(js源)

    在这个上下文中,半透明对话框可能就是通过创建和操作DOM中的div元素来实现的,通过CSS设置其透明度和位置,使其成为页面上的浮动窗口。 “半透明”是一种视觉效果,通常通过CSS3的`opacity`属性来实现,允许背景...

    jquery半透明拖拽窗口插件

    4. `css`目录 - 包含CSS样式文件,这些文件定义了浮动窗口的外观,包括半透明效果、边框、布局和字体等。其中可能有一个名为`translucent.css`的文件,专门处理半透明效果。 5. `translucent`目录 - 可能包含了实现...

    jquery 相交半透明圆形

    至于“半透明泡泡”效果,我们可以创建多个这样的圆形,通过CSS3的动画或jQuery的`fadeIn()`和`fadeOut()`方法来模拟泡泡上升、浮动和消失的过程。还可以添加随机的初始位置和大小,以及不同的透明度变化,以增加...

    MyPixbot带阴影的可拖动的浮动层

    例如,`box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5)`将为元素添加一个向右下角偏移5像素,模糊半径为10像素,颜色为半透明黑色的阴影。 浮动层的可拖动功能通常通过监听鼠标事件来实现。JavaScript可以捕捉到`...

    jquery浮动层动画loading页面加载特效

    在本案例中,jQuery被用来创建浮动层,即一个覆盖在网页上的透明或半透明层,它会在页面内容加载期间显示,以告知用户页面正在处理数据。 浮动层通常是一个弹出窗口,可以设置为全屏或只占据屏幕的一部分。在...

    半透明html5博客主题

    3. **自定义背景**:用户可能可以设置半透明背景,使内容在之上浮动,创造出独特的视觉效果。 4. **动态特效**:HTML5支持许多动画和过渡效果,如CSS3动画和JavaScript库,这些可以在博客文章、侧边栏或页脚等区域...

Global site tag (gtag.js) - Google Analytics