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进行位置的定位。

    效果:

  • 相关阅读:
    Satellite Basics
    Antenna basics
    Installing a Sailor 900 VSAT
    Installing Intellian VSAT
    IPTV、DVB、OTT的区别
    STM32两种下载方式
    Postman 使用指南
    elasticsearch term 查询之一
    Elasticsearch -from + size设置
    TIMESTAMP和DATETIME的区别
  • 原文地址:https://www.cnblogs.com/sweeeper/p/10938377.html
Copyright © 2011-2022 走看看