半透明文本阴影 div

Question

我有这个测试按钮（运行代码片段 用于 mousedown 行为）。我希望文本也有一些阴影 'beneath' 它的父 div （就好像它是不透明的位图一样）。有什么建议吗？

  $( document ).ready(function() {
      $('#button').on ( 'mousedown', function () {
          $(this).removeClass ('normal').addClass ( 'pressed' ) ;
      } );
      $('#button').on ( 'mouseup', function () {
          $(this).removeClass ('pressed').addClass ( 'normal' ) ;
      } );
  });

  html, body, .allofit {
    width:100%;
    height:100%;
    margin: 0;
}
  .allofit {
  display: flex;
}

.centered {
  margin:auto;
  text-align: center;
  border: 1px solid #444;
  border-radius: 10px;
  vertical-align: middle;
  display: flex;
}

.normal {
  width: 50%;
  height: 50%;
  background-color: rgba(128,255,160,0.6);
  filter: drop-shadow(15px 15px 8px rgba(40, 80, 40, 0.8) );
  -webkit-filter: drop-shadow(15px 15px 8px rgba(70,130,70,0.8));
  opacity: 80;
  padding: 0;
}

.pressed {
  width: calc(50% - 2px);
  height: calc(50% - 2px);
  padding:2px 0 0 2px;
  background-color: rgba(128,255,160,0.6);
  filter: drop-shadow(8px 8px 4px rgba(40, 80, 40, 0.8) );
  -webkit-filter: drop-shadow(8px 8px 4px rgba(70,130,70,0.8));
  opacity: 80;
}

.label {
  margin:auto;
  font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
  font-size:30pt;
  font-weight:900;
}

.noselect {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="allofit">
        <div id="button" class="centered normal">
            <div class="label noselect">Click Me</div>
        </div>
    </div>

Answer 1

感谢@GCyrillus，我让它按预期工作。解决方案如下记录。

  $( document ).ready(function() {
      $('#button').on ( 'mousedown', function () {
          $(this).removeClass ('normal').addClass ( 'pressed' ) ;
          $('#label').removeClass ('normalText').addClass( 'pressedText' );
      } );
      $('#button').on ( 'mouseup', function () {
          $(this).removeClass ('pressed').addClass ( 'normal' ) ;
          $('#label').removeClass ('pressedText').addClass( 'normalText' );
      } );
  });

  html, body, .allofit {
    width:100%;
    height:100%;
    margin: 0;
}
  .allofit {
  display: flex;
}

.centered {
  margin:auto;
  text-align: center;
  border: 1px solid #4a4;
  border-radius: 10px;
  vertical-align: middle;
  display: flex;
}

.normal {
  width: 50%;
  height: 50%;
  background-color: rgba(128,255,160,0.6);
  filter: drop-shadow(15px 15px 8px rgba(40, 80, 40, 0.8) );
  -webkit-filter: drop-shadow(15px 15px 8px rgba(70,130,70,0.8));
  opacity: 80;
  padding: 0;
}

.normalText {
  text-shadow: 12px 12px 6px #8a8;
}

.pressed {
  width: calc(50% - 2px);
  height: calc(50% - 2px);
  padding:2px 0 0 2px;
  background-color: rgba(128,255,160,0.6);
  filter: drop-shadow(8px 8px 4px rgba(40, 80, 40, 0.8) );
  -webkit-filter: drop-shadow(8px 8px 4px rgba(70,130,70,0.8));
  opacity: 80;
}

.pressedText {
  text-shadow: 6px 6px 3px #686;
}

.label {
  margin:auto;
  font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
  font-size:30pt;
  font-weight:900;
}

.noselect {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="allofit">
        <div id="button" class="centered normal">
            <div id="label" class="label noselect normalText">Click Me</div>
        </div>
    </div>

半透明文本阴影 div

Text shadow in translucent div

html

css

shadow

opacity