テキスト丸め込み、画像暗くするメモ

テキスト丸め込みメモ

画像を暗くするときは、rgba(color,opacity)functionをbeforeで使う

SCSS

.text {
  overflow: hidden; //topics部分と2箇所かける
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mainVisual {
  background: url("sample.png") no-repeat center top/cover;
  border-bottom: 1px solid $color-aaaaaa;
  height: 220px;
  position: relative;

  &::before {
    background-color: rgba($color-000000,0.4);
    bottom: 0;
    content: " ";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
}