http://jsfiddle.net/TurtleWolf/P7xKm/センターキティ? jsFiddleで!
ダウン背景を強制だから、僕は背景画像は、HTMLの残りの部分を下回ることはないにしたいです。これは、エバンが2番目のリンクですでに私を助けてくれたことに続くものです...イメージはどのウィンドウにも再サイズされますが、今はバックグラウンドイメージとして機能しません... html5のベストプラクティスはこの状況のために?
http://jsfiddle.net/TurtleWolf/P7xKm/センターキティ? jsFiddleで!
ダウン背景を強制だから、僕は背景画像は、HTMLの残りの部分を下回ることはないにしたいです。これは、エバンが2番目のリンクですでに私を助けてくれたことに続くものです...イメージはどのウィンドウにも再サイズされますが、今はバックグラウンドイメージとして機能しません... html5のベストプラクティスはこの状況のために?
更新アプローチここ:http://jsfiddle.net/irama/P7xKm/24/
あなたがコンテンツ層追加したい...
を、それを破壊:その後、あなたは上のコンテンツを階層化することができますので、ドキュメントフローのうち、「コンテナ」要素を取りたい
<div id="content">
<p>Hello kitty!</p>
</div>
<div id="container">
<img src="http://placekitten.com/g/200/300" class="bg_image" />
</div>
を上部:
.bg_image {
width: 100%;
}
#container {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
#content {
position: relative;
z-index: 2;
background-color: #fff;
}
イメージを垂直にセンタリングするかどうかに応じて、JavaScriptを取得または終了することができます。
画像の高さが変わる場合は、ウィンドウサイズが変更されたときに位置を再計算する必要があります。 jsfiddleとセットでのJavaScriptのエリアで
投げこれをパラメータnowrap(ボディ) ':
$(function(){
$('.bg_image').centerVertically();
$(window).resize(function(){
$('.bg_image').centerVertically();
});
});
$.fn.centerVertically = function() {
$(this).css('margin-top', $(window).height()/2 - $(this).height()/2);
};
参照:http://jsfiddle.net/irama/P7xKm/22/
あるいは、jsfiddleの外のため、あなたの終値<の体の前にこれを追加し>タグ:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script>
$(function(){
$('.bg_image').centerVertically();
$(window).resize(function(){
$('.bg_image').centerVertically();
});
});
$.fn.centerVertically = function() {
$(this).css('margin-top', $(window).height()/2 - $(this).height()/2);
};
</script>
いいえ、これを考える上でのあなたのやり方...私はイメージの縦型バリエーションには関心がありません。それはとにかくプレースホルダーです。私はイメージが背景イメージとして機能するようにしたいので、htmlはその上に重ねられます。 – TurtleWolf
ああ...それでは、私の次の回答のために2分待ってください。 – irama
ありがとう、それは私が思っているようなものです。私は明日明文で私のテキストの裏を透明にする方法を探しています...しかし、私は時間が来たらそれを研究することができると確信しています。ありがとうございました! – TurtleWolf
心配する必要はありません。 – irama
おそらく別のスレッドでは良いでしょうが、半透明の背景を(テキストを完全に不透明にしたままで)実行する最も簡単な方法は、残念ながら背景画像としてタイル張りされた半透明のPNG(アルファ透明度を使用) 。これはIE6では機能しませんが、最新のブラウザでは機能します。 Photoshopから透明度のある24ビットPNGまたは花火からアルファ透明度のある8ビットPNGとして書き出すことができます。 – irama