次のようなインライン css スタイルの html があります。
<div class="bgdiv" style="background: url('http://wallpaper.pickywallpapers.com/1366x768/colorful-circles-and-drops.jpg') local center center no-repeat transparent;
background-size:100% 100%;
width: 400px;height:400px"> I am some dummy text. </div>
これは正しくレンダリングされますが、divの高さ500pxをJavaScript経由で変更すると、このような背景のいくつかのコンポーネントに分解されます
$(document).ready(function () {
$('.bgdiv').css('height', '500px');
});
最終/出力インライン CSS スタイル:
background-image: url(http://wallpaper.pickywallpapers.com/1366x768/colorful-circles-and-drops.jpg);
background-attachment: local;
background-color: transparent;
background-size: 100%;
width: 400px;
height: 500px;
background-position: 50% 50%;
background-repeat: no-repeat no-repeat;
私が申し込んだのに気がついたらbackground、今はそうでbackground-imageあり、最大の問題はbackground-size:100%私が申し込んだことですが、background-size:100% 100%これは予期せぬことであり、変更したくありません。
ここにデモhttp://jsfiddle.net/pu7WR/1/があります
css の変更を確認してください。これが期待される動作であるかどうかはわかりませんが、background-size:100%私が望んでいることを壊していますbackground-size:100% 100%
注: ここではクラスを使用できません。background-sizeそして、高さを更新した後に変更できることを知っています。
しかし、なぜですか？そもそもなぜ更新されるのでしょうか？
詳細を提供できることをお知らせください。(私は質問にもっと良いタイトルを付けようとします)