蛍光ペン風マーカーと文字が重ならない

PR 2017/3/27

このトピックには3件の返信、2人の参加者があり、最後にわいひらにより9年、 5ヶ月前に更新されました。

3件の返信スレッドを表示中

投稿者

投稿
- 2017年3月25日 3:36 PM #51351
  
  grugru
  ゲスト
  
  色んなサイトでよく見かける蛍光ペン風アンダーラインを作りたいので下記のコードをstyle.cssに加えました。
  .marker_pink {background: linear-gradient(transparent 70%, #ff99cc 60%);}
  
  結果以下の画像のように反映され、文字とマーカーが重なっていませんでした。
  https://i.gyazo.com/77e96a2dfbb379b6c2021b570d6dd0af.png
  
  蛍光ペン風のマーカーについての解説記事をいくつか読んだのですが、それらの記事では文字とマーカーが重なっておりそのようにしたいと思っていました。
  
  お手すきな時で結構ですので、どこを編集すればいいのか教えて頂ければと思います。
  よろしくお願いします。
- 2017年3月25日 6:21 PM #51355
  わいひら
  キーマスター
  こんな感じで試すといけるのではないかと思います。
```
.marker_pink {
    background: rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ff99cc 60%) repeat scroll 0 0;
}
```
  これで、うまくいかなければ、該当ページのURLを掲載して、ソースコードを見せていただければと思います。
- 2017年3月26日 9:18 AM #51381
  grugru
  ゲスト
  ご返信ありがとうございます。
  記載していただいたものも試させて頂いたのですが、ほとんど文字にマーカーが重なりませんでした。
  色々と自分で試した結果、マーカー部分を太くし下部分を消すと自分のイメージに近いものになりました。
```
.marker_pink {
    background: rgba(0, 0, 0, 0) linear-gradient(transparent 50%, #ff99cc 80%,transparent 75%) repeat scroll 0 0;
}
```
  初心者のつまらない質問だったかもしれませんが、お答え頂きありがとうございました。
- 2017年3月27日 6:11 PM #51391
  
  わいひら
  キーマスター
  
  デフォルト状態のテーマでは、#51355の方法で、ちゃんと重なって表示されるので、何かしらのCSS変更等のカスタマイズが影響しているのかもしれません。
投稿者

投稿

3件の返信スレッドを表示中

トピック「蛍光ペン風マーカーと文字が重ならない」には新しい返信をつけることはできません。