HTML複数のdiv（背景添付ファイル付きとすることなく、いくつかの：固定）背景-sizeプロパティ
<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="top"></div>
<div id="bot">
<div id="one"></div>
<div id="two"></div>
<div id="thr"></div>
<div id="fou"></div>
</div>
<script src="test.js"></script>
</body>
</html>
CSS
#top {
height: 100vh;
}
#bot {
width: 100vw;
height: 100vh;
display: flex;
}
#one, #two, #thr, #fou {
flex: 1;
background: url('image.jpg');
}
#one, #thr {
background-attachment: fixed;
}
と背景画像/奇妙な結果を共有JS
function whatever() {
var oneW = one.clientWidth;
two.style.backgroundPosition = '-' + oneW + 'px 0';
fou.style.backgroundPosition = '-' + oneW * 3 + 'px 0';
};
私は問題に遭遇しました。私が作成したい一般的な効果は、上記のコードで達成することができます。しかしbackground-imageのサイズは、background-sizeプロパティを作成して設定していないため、実際のイメージファイルのサイズと思われるので、イメージが中央に配置されず、ブラウザがイメージよりも小さい場合は切り捨てられます。私はbackground-size: coverを適用しようとしましたが、それはbackground-attachment: fixedの要素とは異なる要素に影響しているようです。何をするか、どうやってこれを回避できるかはわかりません。 誰かがこの特定の問題にどのように対処できるかを知っていますか？事前に任意のソリューション、ヘルプ、またはアイデアをお寄せいただきありがとうございます！
UPDATEので
は、私が遭遇した（CSS background-size: cover + background-attachment: fixed clipping background imagesとhttp://www.carsonshold.com/2013/02/css-background-sizecover-doesnt-like-fixed-positioning/）2つのページからの情報に基づいて、私は一種の解決background-attachment: fixeddiv Sの高さを調整するためにいくつかのJSを追加しました問題だけど本当にそうではない。以下は追加JSです。
function whatever()
{
...
var oneH = one.clientHeight;
one.style.backgroundSize = 'auto ' + oneH + 'px';
thr.style.backgroundSize = 'auto ' + oneH + 'px';
};
ブラウザはbackground-sizeがcoverに設定されていても、フルスクリーンまたは四半期の画面ですが、何らかの理由で画像が今background-sizeがcontainに設定されているかのように振る舞う場合、これは完全にイメージを合わせます。私は困惑している。
UPDATE II
私は手動でウィンドウのはinnerWidthおよびinnerHeightはのそれにそれぞれのdivのサイズを設定することで、これを解決しました。コードは以下の回答セクションにあります。
それは同様にHTMLを含めるために役立つかもしれない... – JonSG
は、それはHTMLとは何の関係もありません@JonSGが、あなたの要求ごととして、私はとにかくそれを含めました。 –
@JonSG私は手動で 'div.style.backgroundSize'を' window.innerWidth'と 'window.innerHeight'に設定することでこの問題を解決しました。 –