css 想做一个框,四周有背景色(带透明度),中间透明

想用css做一个框,四周有背景色(带透明度),中间透明。我可以使用手指拖动四个角,放大缩小这个框。框.png
请教这个框的样式应该怎么做?主要是框与屏幕边之间的带透明度的背景色,不知道怎么做。### 问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

你期待的结果是什么?实际看到的错误信息又是什么?

阅读 1.7k
评论
    6 个回答
    • 1k

    给中间的框加这个

    box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);

    颜色可以自己换

      需求拆解成三部分

      ① 样式
      样式的,楼上给了很多种方法,题主自己去尝试,千千万万种,至少这个样式不是难度。
      rgba实现透明度,四个角的border如何解决,网上一搜有一堆,勤动手。https://segmentfault.com/q/10...
      四楼的box-shadow方法最优。

      ② 拖动
      ③ 缩放

      拖动缩放的找一个插件去做,动手搜一搜就可以了,如果要用于移动端,就找适配移动端的插件。
      https://segmentfault.com/q/10...

      一分钟随手写一个demo,看看效果

      33.gif

      测试地址:
      代码:

      <!doctype html>
      <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>jQuery UI 缩放(Resizable) - 动画</title>
        <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
        <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="jqueryui/style.css">
        <style>
        #resizable { width: 150px; height: 150px; padding: 0.5em; 
            background:rgba(255,255,255,0);
            z-index:99;
            box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);
             background: linear-gradient(to left, #fff, #fff) left top no-repeat, 
                      linear-gradient(to bottom, #fff, #fff) left top no-repeat, 
                      linear-gradient(to left, #fff, #fff) right top no-repeat,
                      linear-gradient(to bottom, #fff, #fff) right top no-repeat, 
                      linear-gradient(to left, #fff, #fff) left bottom no-repeat,
                      linear-gradient(to bottom, #fff, #fff) left bottom no-repeat,
                      linear-gradient(to left, #fff, #fff) right bottom no-repeat,
                      linear-gradient(to left, #fff, #fff) right bottom no-repeat;
             background-size: 6px 20px, 20px 6px, 6px 20px, 20px 6px;  
            }
        #resizable h3 { text-align: center; margin: 0; }
        .ui-resizable-helper { border: 1px dotted gray; }
             /**
            .mask { position:fixed; width:100%;height:100%;background:rgba(0,0,0,0.5) }
            **/
            body { background: url('https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3606910914,1579853926&fm=26&gp=0.jpg');}
        </style>
        <script>
        $(function() {
          $( "#resizable" ).draggable()
          $( "#resizable" ).resizable();
        });
        </script>
      </head>
      <body>
          <div class='mask'>
      <div id="resizable" class="ui-widget-content">
       
      </div>
       </div>
       
      </body>
      </html>
        • 7.5k

        那个啥,我觉得最简单的办法是用border属性了吧。
        四周透明背景使用border。
        你拖动的时候计算上下左右border的宽度就行。

        体验地址:
        http://jsrun.pro/8NWKp/edit

        image.png

          简单的利用border-width可以实现

            考虑到可以拖动且缩放,那么相对比较简单的方法就是用 CSS 中的 mask 属性来做了。

              • 385

              虽然不是很懂原理,但是cropperjs可以实现你的需求

                撰写回答

                登录后参与交流、获取后续更新提醒