CSS トランジション: 背景サイズが機能しない
<p>画像の上にマウスを置くとズームアウトして、div の背景を確認するためにズームアウトしすぎなくても画像全体が表示される Web サイトを開発しています。 </p>
<p>私の HTML は次のようになります: </p>
<pre class="brush:html;toolbar:false;"><div id="wrapper">
<div id="imgDiv">
<div id="transitionDiv" style="background-image: url("../resources/models/HA-SJX.JPG");"></div>
</div>
<p id="title">MALEV セスナ c172 HA-SJX (G1000)</p>
<a href="../downloads/TP172-MALEV PS_P4exw.zip" download="MALEV セスナ c172 HA-SJX (G1000)">ダウンロード</a>
</div>
</pre>
<p>そして私のCSS: </p>
<pre class="brush:css;toolbar:false;">:root {
--img-size: 350px;
--ボタンマージン: 20px;
--ダークブルー: #070b21;
--青: #10184a;
--水色: #00d1ff;
}
div#wrapper {
位置: 相対的;
マージン: 自動;
マージン-ボトム: 100ピクセル;
背景色: var(--dark-blue);
幅: var(--img-size);
}
div#imgDiv {
位置: 相対的;
テキスト整列: 中央;
赤色;
パディング: 0;
マージン: 0;
背景色: var(--dark-blue);
オーバーフロー: 非表示;
高さ: var(--img-size);
}
div#imgDiv div#transitionDiv {
背景位置-x: 50%;
高さ: 100%;
幅: 100%;
背景サイズ: auto var(--img-size);
背景リピート: リピートなし;
-webkit-transition: 背景サイズ 1500 ミリ秒の容易さ。
-moz-transition: 背景サイズ 1500 の容易さ;
-o-transition: 背景サイズ 1500 の容易さ。
-ms-transition: 背景サイズ 1500 ミリ秒の容易さ。
トランジション: 背景サイズ 1500 ミリ秒の容易さ。
}
div#imgDiv:hover div#transitionDiv {
背景位置 y: 50%;
背景サイズ: var(--img-size) 自動;
}
p#title {
オーバーフロー: 非表示;
高さ: 38px;
マージン: 30px;
表示: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: 垂直;
}
div#designs div a {
表示ブロック;
テキスト整列: 中央;
テキスト装飾: なし。
背景色: var(--light-blue);
色: 白;
フォントサイズ: 40px;
フォントファミリー: 「モンセラート」、サンセリフ;
マージン: var(--button-margin);
パディング: 0px;
幅: calc(100% - 2 * var(--button-margin));
境界半径: 15px;
トランジション: 0.5秒;
}
div#designs div a#no-link {
背景色: グレー;
}
div#designs div a:hover {
背景色: dodgerblue; /* 現時点ではランダムな色を使用します */
}
div#designs div a:active {
Background-color: blue; /* 現時点ではランダムな色を使用します */
}
</pre>
<p>解決策を探してみましたが、どれも私のやり方でやれと言われました。これにより、背景画像が正しいサイズに拡大縮小されますが、トランジションは機能しません。 </p>
<p>また、div 内にイメージタグが含まれるように div を変更しようとしましたが、それも機能しませんでした。 </p>
