要素の一部をハイライトする為に半透明のレイヤーを乗せて一部をクリッピングしてくり抜きたい

Question

イメージを添付いたします。
ハイライトしたい位置や大きさが変わるので汎用的に作りたいと考えています。
clip-pathの反転（外側）を使いたいです。

mask-image:radial-gradient()

上記を使うとサイズ、位置共に調整出来て任意の場所をクリッピングマスクできるのですが四角にする方法が分かりませんでした（出来ない？）
**linear-gradient()**にするとサイズ、位置指定が出来ずに困っておいります。

良い方法をご存知の方がいらっしゃいましたらご教授お願いいたします。

Answer 1

ブラウザ対応に難がありますが、こういう方法もあるかと思います。（とりあえず、Chromeで確認してください）

サンプル

  backdrop-filter: brightness(200%);

backdrop-filter - CSS: カスケーディングスタイルシート | MDN

Comments

[goldenb]

ご回答ありがとうございます。
brightnessを初めて知りました。使ってみて検証してみます！
ご教授くださりありがとうございました。

Answer 2

シンプルにbackgrandを使えば良いかと^^

<div class="wrap">
  <div class="clip">
    <p>クリップするテキスト</p>
  </div>
  <p>おまけテキスト</p>
</div>

.wrap  {
  background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("画像パス") 0 0 no-repeat;
}
.clip {
  transform:translate(〇px, △px); /* 移動したい位置など */
  width: ●●px; /* クリップの横幅 */
  height: ▲▲px; /* クリップの高さ */
  background: url("wrapと同じ画像パス") -△△px -〇〇px no-repeat; 
  /* 画像の起点(左上)がwrapと同じ位置になるよう -△△px -〇〇px で調整 */

~~ 以下略 padding、margin などお好みで
}

都度、起点位置を合わせるのは少々面倒かも? ですが
位置やサイズの調整はしやすいと思います。

Comments

[goldenb]

ご回答ありがとうございます。
こちらの方法もシンプルに切り取ることができてよかったのですが先ほど追加した画像のようなケースの場合はやはり半透明レイヤーを切り抜く必要があると思うのでもう少し模索してみます。
別の方法がございましたらお知らせいただけると幸いです。

お時間を使っていただき感謝しています。

[-millmill-]

追加画像のような場合は
無理に移動させる必要は無いので
transform:translate(〇px, △px); width: ●●px; height: ▲▲px;
など不要なスタイルを削除すれば良いのでは? と思います。

後は画像の起点を調整するだけで行けると思います^^;

Answer 3

背景画像を設定したブロックに、before疑似要素で半透明の背景色のブロックを作成して重ねて、さらに、after要素で同じ背景画像のブロックを重ねて、それを clip-path 切り取ればどうでしょうか。

<div class="box">
</div>

.box {
  width: 500px;
  height: 300px;
  position: relative;
  background-image: url(画像パス);
}
.box::before,.box::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.box::before {
  background-color:rgba(0,0,0,0.5); 
}
.box::after {
  background-image: url(画像パス);
  clip-path: inset(30% 20% 30% 40%); /* お好みに切り抜いてください */
}

CodePenサンプル

Comments

[goldenb]

ご回答ありがとうございます！
確かに画像の一部をハイライトしたい場合記載いただいた方法で出来ますね。
ただ画像の上に要素としてテキストがあり、そのテキストを含めた範囲をハイライトさせたい場合には記載いただいた方法では対応出来ないようです。

黒半透明レイヤーにサイズと位置を任意の数値で穴をあけるのは難しいのでしょうか。
linear-gradientやmask-imageで出来そうな気もするのですがこのような用途で解説している記事を見つける事が出来ず...

もし参考になりそうな記事等ございましたらお知らせいただけると幸いです。
私の質問にお時間をとってご回答いただき感謝いたします。

[hatena19]

z-index で上下関係を設定すればどうでしょうか。

https://codepen.io/hatena19/pen/QWyOZjb

あるいは、ボーダーを利用するとか。

https://codepen.io/hatena19/pen/pogdxPN

[goldenb]

ご回答ありがとうございます。
記載いただいた方法も参考にさせていただきます。
後出しで申し訳ないのですが追加した画像のようなケースの場合はやはり半透明レイヤーを切り抜く必要があると思うのでもう少し模索してみます。

[goldenb]

ボーダー見落としていました。
このやり方も再現できますね。色々な手段をご教授いただきありがとうございます。