質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.09%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 119

goldenb

score 28

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

mask-image:radial-gradient()


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

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

イメージ説明

イメージ説明

イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+2

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

サンプル

  backdrop-filter: brightness(200%);

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/02 17:25

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

    キャンセル

+1

背景画像を設定したブロックに、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サンプル

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/01 23:34

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

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

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

    キャンセル

  • 2020/07/02 00:38 編集

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

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

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

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

    キャンセル

  • 2020/07/02 17:13

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

    キャンセル

  • 2020/07/02 17:32

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

    キャンセル

+1

シンプルに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 で調整 */

~~ 以下略 paddingmargin などお好みで
}


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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/02 17:22

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

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

    キャンセル

  • 2020/07/02 17:25 編集

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.09%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • CSSに関する質問
  • 要素の一部をハイライトする為に半透明のレイヤーを乗せて一部をクリッピングしてくり抜きたい