- このトピックには17件の返信、3人の参加者があり、最後に
により5年、 11ヶ月前に更新されました。
-
投稿
-
こちらの環境だけかもしれませんが，
Widget「Snow Monkey 最近の投稿」のホバー時の色がとても濃く，透明度が効いていないかのようで元の画像がほとんど見えない状態になります。（https://snow-monkey.2inc.org も同様）
・OS X v10.11，Safari v11.1，Firefox v55.0.3，Chrome v70.0.3538.102
（Snow Monkey v3.x時 からです）環境が古いからでしょうか。
いいねをした人: 居ません
僕の環境だと普通に透過されてますね。Chrome のバージョンは僕のものと同じなので不思議です。OS って描画に関係あるのかなぁ。ちょっと詳しくなくこれはわからないです、すみません。。。
いいねをした人: 居ませんお世話になります。
macOS High SierraのSafari、Chromeで以下のように表示されます。
カテゴリーのアクセントカラーのホバー色もサイトのアクセントカラーのままになっています。
どのバージョンアップのタイミングからかわからないですが、以前はホバー色もアクセントカラーが効いていました。
いいねをした人: 居ません素早い対応ありがとうございます！
カテゴリーアクセントカラーの復活確認しました。しかし今度は不透明度の設定で手こずっています。
.c-entries–rich-media a>.c-entry-summary .c-entry-summary__figure:after {
background-color: rgba(189, 60, 79, .4);
}
このaの値を0.2とか0.3にしても、見た目0.8くらいのままなんです。いいねをした人: 居ませんこのaの値を0.2とか0.3にしても、見た目0.8くらいのままなんです。
tomato さんと同じ現象ってことですよね。僕の環境だと Safari でも Chrome でも薄い感じなんですよね。なんでだ…。
奥田さんのサイトだけじゃなくて、Snow Monkey の公式サイトをみても同じように濃いままでしょうか？
いいねをした人: 居ませんあ！もしかしたらわかったかもしれません！本来このマスクって、ぶつぶつ模様になるはずなんですよね。そのために、
background-colorだけじゃなくてbackground-image: radial-gradientを指定しているのですが、これが環境によっては意図したとおりに効かないのかもしれません。
キャプチャを見ても、ぶつぶつ模様になってないですよね？もういっそぶつぶつ模様じゃなくてベタ塗りにしちゃえば解決するかもなので、そのようにアップデートしましょうかねー
いいねをした人: 居ませんんー、確かに僕もbackground-image: radial-gradientは、どこに効いているのだろうと悩んだんですが…
ブログ記事の下の「古い投稿」「新しい投稿」にはキタジマさん指定の不透明度40%マスクが効いているんです。
.c-entries–rich-media a>.c-entry-summary .c-entry-summary__figure:after
.c-prev-next-nav__item>a:beforeこの２つのcssの内容は全く同じであるにもかかわらず、片方は効いて片方は効かず、というところに何かヒントがないでしょうか？
いいねをした人: 居ませんお世話になります。
北島さんの「ぶつぶつ模様」からちょっと閃いて，再度調べてみました。
恐らく .c-entry-summary__figure:after に設定されている background-size: 1px 1px が，Retina ディスプレイの解像度でないと潰れているようです。
そういえば，MacBookでは透過が効いて，作業用の Cinema Display では透過が弱い（色が濃い）ことを思い出し，background-size: 4px 4px で試したところ解消しました。
.c-prev-next-nav__item>a::before の透過が効いている理由は，まだ探っていません。
何かのお役に立てば幸いです。
いいねをした人: 居ません
- トピック「Widget「Snow Monkey 最近の投稿」のホバー時の色が濃い」には新しい返信をつけることはできません。