蓝鸢梦想

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

展开

站内通知     

    查看: 361|回复: 0
    收起左侧

    [背景特效] 代码实现看到背景层,表层半透明化

    [复制链接]
  • TA的每日心情
    慵懒
    昨天 20:55
  • 签到天数: 39 天

    连续签到: 1 天

    [LV.5]常住居民I

    843

    主题

    1044

    帖子

    1万

    积分

    管理员站长大人】 :Rank: 9Rank: 9Rank: 9

    威望1869
    贡献1286
    蓝币5084

    最佳新人活跃会员热心会员推广达人灌水之王突出贡献优秀版主荣誉管理论坛元老

    发表于 2016-11-16 21:10:50 | 显示全部楼层 |阅读模式

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    因为最近写代码,一个同学找到我,说想实现这样一个效果

                                   
    登录/注册后可看大图

    也就是说上面的层在不完全阻拦下面的层的情况下,出现一个半透明的情景。
    根据这个要求,我写出了以下代码:
    1. <html>
    2. <head>
    3.         <title>背景虚拟化</title>
    4.         <style type="text/css">
    5.                 body{background: url(20161116202527.jpg); background-repeat: no-repeat;}
    6.                 #ce{border:1px #0000FF dashed; width: 200px; height: 80px; border-radius: 10px; background-color: #fff;opacity:0.6; margin: 25px;}
    7.         </style>
    8. </head>
    9. <body>
    10. <div id="ce">
    11. </div>
    12. </body>
    13. </html>
    复制代码
    重点在于:opacity:0.6;   不透明度为60%;
    写出来希望能够帮到大家。
    提供懒人文件下载: Alhambra.html (354 Bytes, 下载次数: 0)

    代码实现看到背景层,表层半透明化

    代码实现看到背景层,表层半透明化

    代码实现看到背景层,表层半透明化

    代码实现看到背景层,表层半透明化

    代码实现看到背景层,表层半透明化

    代码实现看到背景层,表层半透明化
    该会员没有填写今日想说内容.

    Archiver|手机版| |湘公网安备43130202000049号  

    GMT+8, 2019-1-18 04:22

    技术支持: 蓝鸢梦想

    © 2015-2019 WWW.ACEANOW.COM

    快速回复 返回顶部 返回列表