[
[返信する]]
背景画像が粗くなる
by ゆき
2017-06-12 20:29
同一質問がなかったため失礼します。
背景画像を固定し、上から下にかけてテーブルの色がグラデーションになっていくタグを使用していますが、背景画像が粗く（拡大して表示されてしまう？）なってしまいます。
パソコンとアンドロイドは問題なく表示され、アイフォンのみそのような表示になるので、キャリアによる差でしょうか・・・。
【ＨＥＡＤ】
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=El+Messiri);
*{margin:0; padding:0;}
html{height:100%;}
body{font-family:"El Messiri",Meiryo,メイリオ,Osaka,"MS ゴシック", sans-serif; text-shadow:0 0 4px #000; color:#bbb; background-color:#444; font-size:13px; letter-spacing:1.2px; line-height:2; background:url(#背景画像のURL#) center / cover no-repeat fixed;}
#wrap{margin:0 auto; width:85%; max-width:500px; padding-bottom:20px;}
#wrap2{margin:0 auto; width:89%; max-width:650px;}
h1{font-size:24px; font-weight:normal; text-align:center; margin-bottom:30px;}
#circle{content:""; margin:40px auto 10px; width:90px; height:90px; border-radius:50%; background-color:rgba(199,137,160,0.3);}
a{text-decoration:none; color:#c789a0;}
a:hover{opacity:0.7;}
input{background:none; text-align:center; padding:5px; color:#ddd; border:#bbb 1px solid;}
input[type=submit]{background-color:rgba(199,137,160,0.3);}
.name{text-align:center; margin-bottom:40px;}
.name input{font-size:11px;}
.name input[type=text]{width:70px; margin-right:10px;}
.name input[type=submit]{width:60px;}
.ttll{margin:20px 0; line-height:35px;}
.num{background-color:rgba(199,137,160,0.3); margin-right:10px; display:inline-block; width:30px; height:30px; border-radius:50%;}
#title{color:#ddd; background-color:rgba(199,137,160,0.3); width:60px; height:60px; border-radius:50%; margin:50px auto 0; text-align:center; line-height:60px; font-size:18px; color:#c789a0;}
#text{padding:60px 20px 20px; color:#ddd; background:linear-gradient(transparent,rgba(0,0,0,0.8)); height:100%;}
#nav{text-align:center; margin:20px 0 -20px;}
.pass{margin:0 auto; width:300px; text-align:center; padding-bottom:20px;}
.pass input{font-size:13px; width:200px;}
.pass input[type=text]{box-sizing:border-box;}
.pass input[type=submit]{margin-top:5px;}
.af{margin:20px 0 10px; padding:20px 10px; color:#aaa; border-top:#444 1px solid; font-size:85%; text-align:right;}
</style>
【文章画面レイアウト】
<div id="wrap2">
<div id="title">#title#</div>
<div id="text">#text#
<div id="nav"><a href="URL">back</a></div>
pc
[編集]
by と
2017-06-14 16:26
</div>が足りない
メイリオやtype=text等、必要な引用符がない
background-size:cover;は書く順番に注意
pc
[編集]
[返信する]
[
戻る
]
[返信する]]
2017-06-12 20:29
pc
戻る
]