不思議な iOS 7 mobile Safari。
URLバー(URL text field)背景に色を設定できる様子。
元ネタ
Safari on iOS 7 and HTML5: problems, changes and new APIs: TOOLBARS’ TINT
以前の投稿「iOS 7, mobile SafariのURLバーは消せない」で紹介させて頂いたサイトの記事です。
background-color: red; background-image: linear-gradient(to bottom, green 0%, green 100%); |
background-color が URLバー(URL text field)背景色。
background-image が背景色です。
始まりと終わりが同色の inear-gradient 設定をするんですねー。
背景画像は URLバー(URL text field) の下にまで回り込まないことを使ったテクニックらしいです。
それとiOS 7からアプリ画面が Status bar 下まで使えることとの兼ね合いなのでしょう。
背景画像が URLバー(URL text field) の下にあると見にくいからかなー。
色はOKで画像がダメな理由はわかんないけど…
背景色と言っても元々のURLバー(URL text field)色と合成されて表示されます。
背景色設定前はこんな感じです。
色が薄いところ: #f8f8f8
色が濃いところ: #e6e6e8
この箇所がもともとアルファ値を持っているのかは不明なのですが、背景に色を設定すると設定値の値のままでは表示されません。
上側の色とアルファ合成されてるのではと思い調べてみました。
色が薄いところ: opacity: 0.9
色が濃いところ: opacity: 0.83*
* 色が濃いところは 0.83 の透明度を設定しても若干色味が違います。
0.83 ~ 0.84 の間のどこかかとと思うのですがジャストのところを見つけられませんでした。
単純なアルファ合成では無いのかもです。
何の役にも立ちそうにない知識をひとつ増やしましたとさ。
気になったら調べ隊活動報告でした。
ピンバック: iOS 7, mobile SafariのURLバーは消せない « イナヅマTVログ