文中の背景色の変更について

PR 2017/1/9

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

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

投稿者

投稿
- 2017年1月7日 10:11 PM #49312
  インパラ
  ゲスト
  お世話になっております。
  
  初心者の質問で申し訳ありませんが
  
  文中の背景色をこのように変更したいのですが（このCSSを設定したい）
```
background: linear-gradient(transparent 40%, #FAD5DC 40%);
    padding-bottom: .2em;
    font-weight: bold;
```
  CSSはどのidもしくはclass名で設定したらよいのでしょうか？
- 2017年1月7日 10:41 PM #49313
  
  Hidekichi
  ゲスト
  
  「文中」というのはどこなんでしょうか？
  
  記事部分で言えば、#the-content(あるいは.entry-content)ですし、タイトル・ポストメタ部分を含むのであれば.article、(デフォルト状態で言う)2カラムの左側なら#mainです。
  厳密に文だけで言えば、それが段落と捉えたら#the-content pになるでしょうし、文中がどこを指すのかが具体的にわからないと何とも答えられないかも知れません。
  
  #mainの背景である#body-in(あるいは#body、はたまた#main自体)の背景に画像を入れていたり色を変えているようであればtransparentで良いかと思いますが、できるだけグラデーションの色はrgba等で指定するようにしてだいたいどんな色を置こうとしているのかを後から見てわかりやすいようにしておくのが良いかと思います。
  白の半透明の場合、rgba(255,255,255, .5)とか。
  
  angleもデフォルトは上から下へのグラデーションだと思いますが、できるだけto bottomとか、あるいは任意の角度で90deg(左から右)などと指定するのが良いかと思います。
  
  background: linear-gradient(transparent 40%, #FAD5DC 40%);この指定だと、firefoxではスパンと色が変わりグラデーションしないのではなかろうかと思います。させないのであればそれで良いですが。
- 2017年1月8日 1:27 AM #49314
  
  インパラ
  ゲスト
  
  返信ありがとうございます。
  
  「文中」の説明不足ですみません。
  
  おっしゃる通り記事部分のことです。
  
  >>できるだけグラデーションの色はrgba等で指定‥後から見てわかりやすいよう‥
  
  丁寧にありがとうございます。
  
  返信を頂いてすぐに
  
  >>firefoxではスパンと色が変わりグラデーションしない‥
  
  この部分の意味がわからなかったので調べていました‥
  
  恥ずかしいのですがもう少しこの部分を説明していただいてもよろしいですか？
- 2017年1月8日 1:46 AM #49316
  
  Hidekichi
  ゲスト
  
  サンプル: グラデーションサンプル | jsFiddle
  
  こういう感じです。
  ブラウザによって表示が変わるかも知れないので、firefox、chrome等で確認してみてください。
- 2017年1月8日 3:19 AM #49317
  
  インパラ
  ゲスト
  
  わざわざありがとうございます！
  
  違いがわかりやすく参考になりました。
  
  そして「to bottom」も。
  
  助かりました。
- 2017年1月8日 6:58 AM #49318
  
  Hidekichi
  ゲスト
  
  グラデーションはおそらくたいていのブラウザで実装されていますが、これまでに色々と書き方の変遷があったので、古いブラウザに向けてのフォールバック等も含めて面倒くさいですが色々と書いておいたほうが良いかと思います。
  
  参考: linear-gradient | MDN
  ※ ここの最後の方に「クロスブラウザなグラデーション」というのがあります。
投稿者

投稿