回答編集履歴
5
説明追記
test
CHANGED
@@ -12,6 +12,8 @@
|
|
12
12
|
|
13
13
|
```
|
14
14
|
|
15
|
+
Safari の transparent は rgba(255,255,255,0) (黒の透明)になっているのが原因らしいです。
|
16
|
+
|
15
17
|
|
16
18
|
|
17
19
|
[透過のCSSグラデーションでSafariだけ黒くなる原因と解決法](https://glatchdesign.com/blog/transparent-css-gradient-safari/)
|
4
コード修正
test
CHANGED
@@ -6,9 +6,9 @@
|
|
6
6
|
|
7
7
|
color: red;
|
8
8
|
|
9
|
-
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255,255,255,0)), color-stop(70%,
|
9
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255,255,255,0)), color-stop(70%, #ffcc00));
|
10
10
|
|
11
|
-
background: linear-gradient(rgba(255,255,255,0) 50%,
|
11
|
+
background: linear-gradient(rgba(255,255,255,0) 50%, #ffcc00 70%);
|
12
12
|
|
13
13
|
```
|
14
14
|
|
3
リンク追加
test
CHANGED
@@ -14,4 +14,8 @@
|
|
14
14
|
|
15
15
|
|
16
16
|
|
17
|
-
[透過のCSSグラデーションでSafariだけ黒くなる原因と解決法
|
17
|
+
[透過のCSSグラデーションでSafariだけ黒くなる原因と解決法](https://glatchdesign.com/blog/transparent-css-gradient-safari/)
|
18
|
+
|
19
|
+
|
20
|
+
|
21
|
+
[マーカー風に線を引くCSSをSafariで表示したら上半分がグレーになってしまった件](https://www.kazmia.co.jp/cssmaker/)
|
2
コード修正
test
CHANGED
@@ -4,15 +4,11 @@
|
|
4
4
|
|
5
5
|
```css
|
6
6
|
|
7
|
-
.guide2-text span {
|
8
|
-
|
9
7
|
color: red;
|
10
8
|
|
11
|
-
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255,2
|
9
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255,255,255,0)), color-stop(70%, rgba(255,204,0,1)));
|
12
10
|
|
13
|
-
background: linear-gradient(rgba(255,2
|
11
|
+
background: linear-gradient(rgba(255,255,255,0) 50%, rgba(255,204,0,1) 70%);
|
14
|
-
|
15
|
-
}
|
16
12
|
|
17
13
|
```
|
18
14
|
|
1
リンク追加
test
CHANGED
@@ -15,3 +15,7 @@
|
|
15
15
|
}
|
16
16
|
|
17
17
|
```
|
18
|
+
|
19
|
+
|
20
|
+
|
21
|
+
[透過のCSSグラデーションでSafariだけ黒くなる原因と解決法 | ブログ | Glatch(グラッチ) - 夫婦で活動するフリーランスWeb制作ユニット](https://glatchdesign.com/blog/transparent-css-gradient-safari/)
|