CSSで、IEでも崩れない文字の透過グラデの方法を教えて下さい。

写真の上の文字を一定の高さ以上になると徐々に透過させたいのですが、いい方法はないでしょうか？

今は以下のCSSの記述にしたのですがこれだとIEで効かなくて。。
（写真の上の文字の為、上に透過のグラデも重ねられません。）

<!DOCTYPE html>
<html>
<head>
<title>CSS3でテキストにグラデーションをかける</title>
<style type="text/css">
.image { 
	height: 200px;
	width: 400px;
	margin: 0 auto;
	padding: 20px;
	background: #f90;
	}
.textArea { 	
    height: 160px;
	mask-image: linear-gradient(top, black 0%, black 60%, rgba(0, 0, 0, 0) 100%);
	-ms-mask-image: -ms-linear-gradient(top, black 0%, black 60%, rgba(0, 0, 0, 0) 100%);
    overflow: hidden;
}
</style>
</head>
<body>
<div class="image" style="background-image:xxxxx.png">
	<div class="textArea">
	<div class="catch">DEMO</div>
	<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
</div>
</body>
</html>

CSSとJS組み合わせでもできる方法はないでしょうか？

m.ts10806

2018/10/03 09:26

-webkit-　とつけるのは何の指定かご理解はされていますか？あと、こちらだけでは再現確認ができません。htmlとCSSをなるべく全体が分かる状態でご提示ください。また、コードはマークダウンのcode機能を利用してください。

waterA

2018/10/03 10:50

＞-webkit-　とつけるのは何の指定かご理解はされていますか？すいません、コピペで使ってあまりりかいしていません。。！＞htmlとCSSをなるべく全体が分かる状態でご提示ください。ありがとうございます！追加しました！

m.ts10806

2018/10/03 10:56

ひとまず「ベンダープレフィックス」で検索してください。なぜIEで効かないか見えてくるかと。おそらくこのままだと現在ついている回答もなぜそのよな回答がついたか分からないままになってしまうので。

waterA

2018/10/03 11:03

ありがとうございます！ベンダープレフィックス理解出来ました！

行動規範の内容に同意します

回答4件

html,javascript,css
1<!DOCTYPE html>
2<html>
3<head>
4<title>CSS3でテキストにグラデーションをかける</title>
5<style type="text/css">
6h1 {
7   color: white;  /* Fallback: assume this color ON TOP of image */
8   background: url(haikei.png) repeat;
9   -webkit-background-clip: text;
10   -webkit-text-fill-color: transparent;
11}
12
13.backgroundclip h1 {
14        background: url(haikei.png) -100px -40px no-repeat;
15        -webkit-background-clip: text;
16        -webkit-text-fill-color: transparent;
17}
18 
19h1 {
20        color: orangered;
21}
22</style>
23</head>
24<body>
25	
26	<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </h1>
27	
28	<script src="modernizr-1.6.min.js"></script>
29<script>
30        Modernizr.addTest('backgroundclip',function(){
31 
32          var div = document.createElement('div');
33 
34          if ('backgroundClip' in div.style) return true;
35 
36          'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g,function(val){
37            if (val+'BackgroundClip' in div.style) return true;
38          });
39 
40        });
41</script>
42	
43</body>
44</html>

画像そのものにグラデかけてやれば良いのでは?

modernizr-1.6.min.js

[CSS]「background-clip」を使って、テキストの下に画像を表示するスタイルシート

投稿2018/10/03 13:36

hectopascal1013

総合スコア466

waterA

2018/10/04 02:17 編集

なるほどです！出来ました！！ html構造を変えてやれば上手くいくのですね！ありがとうございます！（ただ、今回他ページとの兼ね合いで、html構造は維持したかったのでベストアンサーは別の方にさせていただきます！！）

行動規範の内容に同意します

IEでの確認が、Macのsafariの開発モードからしかできないので、実際の対応がどうかはわからないのですが。。。(前置き)

https://webkikaku.co.jp/blog/htmlcss/background-clip-text/
https://developer.mozilla.org/ja/docs/Web/CSS/background-clip

background-clipプロパティはIE9から対応してるような？
こちらのデモはIEで表示されますでしょうか?できたらいけそうな？
http://webkikaku.co.jp/demo/20140515/demo.html

違ったらすいません。

投稿2018/10/03 11:25

編集2018/10/03 11:29

showthank

総合スコア16

waterA

2018/10/04 01:40

ありがとうございます！ただ、イメージとちょっと違うんです。。最後の行あたりの文字だけ透過したくて＞＜

waterA

2018/10/04 01:52

あ、画像をグラデに！ということだったんですね！ありがとうございます！

行動規範の内容に同意します

.textArea{
height: 160px;
/-webkit-mask-image: -webkit-linear-gradient(to bottom top, black 0%, black 60%, rgba(0, 0, 0, 0) 100%);
-ms-mask-image: -ms-linear-gradient(to bottom top, black 0%, black 60%, rgba(0, 0, 0, 0) 100%);
linear-gradient(to bottom right, fuchsia, yellow);
linear-gradient(to bottom right, #000, #FFF);/
background: linear-gradient(to bottom, black 0%, black 60%, rgba(0, 0, 0, 0) 100%);
overflow: hidden;
}
.text,.catch{color:white;}

駄目ですかい?

投稿2018/10/03 12:27

strictsilence

総合スコア18

waterA

2018/10/04 01:52

すみません、ちょっと今回やりたい内容とは違いました。。＞＜！

行動規範の内容に同意します

ベストアンサー

-webkit-を-ms-に変えるのはどうでしょう。

～追記～

CSSを次のように書き換えるのはどうでしょう。

CSS
1.image {
2    height: 200px;
3    width: 400px;
4    margin: 0 auto;
5    padding: 20px;
6    background-image: url("****.png"); //自分の好きな背景画像を設定
7    background-size: contain;
8    }
9
10.textArea {
11    height: 160px;
12    overflow: hidden;
13}
14
15.text {
16  color: rgba(0, 0, 0, 0);
17  background-image: url(****);
18  -webkit-background-clip: text;
19}