CSSで動画のマスク処理を考えています。
具体的には
https://www.rondomark.jp/
のように背景のブロックがあり、その中にdivで括った動画をvideoタグで読み込み、それを
CSSでマスク処理をするということを考えていますが、
Chromeはローカルでも動作し、FireFoxはサーバに乗せたら動いたのですが、
Edgeは一部挙動がおかしいところはありますが、調整はできそうです。
IE11が上手くいかず教えていただければ幸いです。
下記のようなコードで試しています。
【HTML】
<div class="main">
<div class="video_box">
<video class="movie video active" loop="" preload="true" autoplay="autoplay" muted="muted" playsinline="" webkit-playsinline="" width="xxx" height="xxx" src="xxx.mp4"></video>
</div>
</div>
【CSS】
.main{
width: xxxpx;
height: xxxpx;
background: url(xxx.jpg) no-repeat center center;
}
.video {
-webkit-mask-image:url(xxx.svg);
mask-image: url(xxx.svg);
mask-mode: alpha;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position:left top;
mask-position:left top;
-webkit-mask-size: contain;
mask-size: contain;
position: absolute;
}
No.1ベストアンサー
- 回答日時:
こんにちは
>IE11が上手くいかず教えていただければ幸いです。
原因は、単純にIEがmask-imageに対応していないということでしょう。
https://caniuse.com/#search=mask-image
簡単に試してみただけですが、代替案になりそうな例を一つ挙げておきます。
別にマスクレイヤを作成して、そのまま重ねれば、ほぼ同様の効果が得られるものと思われます。
HTMLに、あまり意味のないレイヤ要素を作成するのが嫌であれば、.mainをposition:relativeなどにしておいて、.video_box::afterをposition:absoluteでレイヤ代わりにすればマスクレイヤとして使えます。
(Chromeで試したところ、.video::afterではうまくいきませんでした)
ただし、mask-imageの場合と、上記のレイヤの場合では透明/不透明の部分の扱いが逆になりますのでご注意ください。
また、IEは背景画像のSVGにも対応していないようですので、背景画像でマスクする場合は通常画像(gif、pngなど)を利用するか、あるいは、::afterではなくマスク用の要素をHTML内に作成するといった調整が必要かも知れません。
ありがとうございます。
png等で代替できないか試してみます。
一旦GIFを使ってIE11は凌ぎましたが、
今後も踏まえてご提示の方法を少し時間をとって検証してみようと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- JavaScript 画像の表示位置 3 2022/12/23 08:25
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
background-repeat CSS で切れ...
-
大至急。webのシングルページを...
-
画像の上にテキスト配置で、拡...
-
【Webサイト】画像が小さく表示...
-
submitボタンの上に重ねた画像...
-
iframe内をクリックさせない方...
-
IMGタグで画像の繰り返し使用は…
-
画像とその下にあるテキストの...
-
ホームページのWindowsに表示さ...
-
background-sizeでcontainする...
-
background-sizeの背景で最小値...
-
画像上に文字を表示するとiPhon...
-
ブラウザによって、画面表示の...
-
フッターの背景に色を指定した...
-
ホームページ 窓からのぞく様...
-
ホームページのバックのスクロ...
-
ページごとに背景画像を変更し...
-
lightbox2で画像を天地左右中央...
-
LightBoxの矢印の出し方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-repeat CSS で切れ...
-
htmlかcssで背景の白い枠をなく...
-
lightbox2で画像を天地左右中央...
-
background-sizeの背景で最小値...
-
ページごとに背景画像を変更し...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
ページの上下に白い横線が入る
-
コーディング中、右側に謎の余...
-
画像を複数横に並べ、かつそれ...
おすすめ情報