zoukankan      html  css  js  c++  java
  • 大屏斜线以及背景半透明的实现思路

    今天看了下UI给的稿子,那个斜线以及div快可以看到最底层的背景图片。于是做了个小的demo;

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">#wrap {
    400px;
    height: 400px;
    background: url(img/background.png);
    position: relative;
    }

    .left {
    border: 1px solid red;
    100px;
    height: 0px;
    position: absolute;
    top: 75px;
    }

    .middle {
    40px;
    height: 0px;
    transform: rotate(125deg);
    position: absolute;
    top: 58px;
    border: 1px solid red;
    left: 92px;
    }

    .right {
    200px;
    height: 0px;
    position: absolute;
    left: 124px;
    top: 41px;
    border: 1px solid red;
    }
    .text{
    auto;
    height: auto;
    position: absolute;
    top: 55px;
    color: green;
    }
    .bg{
    100px;
    height: 100px;
    /*background: transparent;*/
    background-color:red ;
    top: 80px;
    left: 40px;
    position: absolute;
    filter: drop-shadow(0px 0px 5px #000);
    filter:opacity(55%);
    }
    </style>
    </head>
    <body>
    <div id="wrap">
    <div class='text'>国家能源集团</div>
    <div class="bg"></div>
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
    </div>
    </body>
    </html>

    里边最外层relative,里边的div都是absolute进行位置的定位。

    效果:

  • 相关阅读:
    ng的ngModel用来处理表单操作
    ionic改tab文字和icon图片的颜色
    ionic安装遇到的一些问题
    ionic运行测试
    安卓sdk安装教程
    ionic教程
    ng 构建
    ng websocket
    ng依赖注入
    Python: 定时器(Timer)简单实现
  • 原文地址:https://www.cnblogs.com/sweeeper/p/10938377.html
Copyright © 2011-2022 走看看