Question

我有一些Mat卡是flexbox物品。我希望卡片本身具有一定的透明度opacity: 0.8;。但是里面的其余元素保持不变。

因此，在所有其他项目中，我都放了opacity: 1;，但这无济于事。

[！[示例] [1]] [1]

.flex-container {
    padding-top: 20px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    vertical-align: middle;
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.flex-items {
    cursor: pointer;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 0px;
    border-radius: 2px;
    padding: 0px;
    flex: 1 1 0;
    height: 100%;
    max-width: 280px;
    animation-name: fadeInDown;
    animation-duration: 0.4s;
}

.mat-card {
  opacity: 0.5;
}

.module-card h1, p {
  opacity: 1 !important;
  margin-block-start: 0.1em;
  margin-block-end: 0.1em;
}


.mat-icon-card {
  opacity: 1 !important;

}

.mat-icon {
  opacity: 1 !important;
  color: rgb(63, 81, 181);
  font-size: 70px;
  height: 70px;
  width: 70px;
  transition: all .1s ease-in-out;

  margin: 10px;
}


.mat-card-header {

    justify-content:center;
    padding: 0px;
    min-height: 70px;
    vertical-align: middle;
    position: relative;
    opacity: 1 !important;
}

.mat-card-title{
  opacity: 1;
  margin: 0px;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="flex-container">
  <div *ngFor="let module of modules">
    <mat-card matRipple [matRippleColor]="white"  class="flex-items hvr-reveal" *ngxPermissionsOnly="module.permissionsRequired">
      <span routerLink={{module.routing}}>
        <mat-card-header>
          <mat-card-title>
            <h1>
              <p style="text-align: center;">
                {{module.name}}
              </p>
            </h1>
          </mat-card-title>
        </mat-card-header>
        <div class="mat-icon-card">
          <p style="text-align: center">
          <mat-icon>{{module.icon}}</mat-icon>
          </p>
        </div>
        <mat-divider></mat-divider>
        <mat-card-content>
          <h3>
            <p style="text-align: center">
              {{module.description}}
            </p>
          </h3>
        </mat-card-content>
      </span>
    </mat-card>
  </div>
</div>


  [1]: https://i.stack.imgur.com/37vZL.png

Answer 1

.mat-card设置rgba（0，0，0，0.5）的背景色，而不是使用不透明度（或您想要的背景色）：

.mat-card{
    background-color: rgba(0, 0, 0, 0.5);
}

Answer 2

如果您添加opacity属性，那么所有在这个子元素的父元素将与它的母公司opacity物业反映，并不能覆盖这子元素。因此，如果需要的背景颜色opacity的父元素然后从父元素除去opacity属性，此内添加rgba颜色属性。

.mat-card {background: rgba(0,0,0,0.5);}

Answer 3

当您使用多个元素时，最好始终保持派生子元素的元素的单独属性。在这种情况下， opacity 最终成为所有元素的一部分，因此最好使用 background-color 属性。

如何仅对席卡应用不透明度，而不对席卡中的其余内容应用不透明度？

3 个答案: