CSS 过渡:背景大小不起作用
P粉821808309
P粉821808309 2023-09-05 00:05:08
0
1
496
<p>我正在开发一个网站,当您将鼠标悬停在图像上时,它会缩小,以便您可以看到整个图像,而无需缩小太多以查看 div 的背景。</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 Cessna c172 HA-SJX (G1000)</p> <a href="../downloads/TP172-MALEV PS_P4exw.zip" download="MALEV Cessna c172 HA-SJX (G1000)">Download</a> </div> </前> <p>还有我的CSS:</p>
:root {
  --img-size: 350px;
  --按钮边距:20px;

  --深蓝色:#070b21;
  --蓝色:#10184a;
  --浅蓝色:#00d1ff;
}

div#wrapper {
  位置:相对;
  保证金:自动;
  底部边距:100px;
  背景颜色:var(--深蓝色);
  宽度:var(--img-size);
}

div#imgDiv {
  位置:相对;
  文本对齐:居中;
  红色;
  填充:0;
  保证金:0;
  背景颜色:var(--深蓝色);
  溢出:隐藏;
  高度:var(--img-size);
}

div#imgDiv div#transitionDiv {
  背景位置 x:50%;
  高度:100%;
  宽度:100%;
  背景大小:auto var(--img-size);
  背景重复:不重复;

  -webkit-transition:背景大小 1500ms 轻松;
  -moz-transition:背景大小 1500 缓动;
  -o-transition:背景大小 1500 缓动;
  -ms-transition:背景大小 1500ms 缓和;
  过渡:背景大小 1500ms 缓和;
}

div#imgDiv:悬停 div#transitionDiv {
  背景位置 y:50%;
  背景大小:var(--img-size) auto;
}

p#标题{
  溢出:隐藏;
  高度:38像素;
  边距:30 像素;
  显示:-webkit-box;
  -webkit线夹:2;
  -webkit-box-orient:垂直;
}

div#designs div a {
  显示:块;
  文本对齐:居中;
  文本装饰:无;
  背景颜色:var(--浅蓝色);
  白颜色;
  字体大小:40px;
  字体系列:“蒙特塞拉特”,无衬线;
  边距:var(--按钮边距);
  内边距:0px;
  宽度: calc(100% - 2 * var(--button-margin));
  边框半径:15px;
  过渡:0.5s;
}

div#designs div a#no-link {
  背景颜色:灰色;
}

div#designs div a:悬停 {
  背景颜色:dodgerblue; /* 现在使用随机颜色 */
}

div#designs div a:active {
  背景颜色:蓝色; /* 现在使用随机颜色 */
}
</前>
<p>我正在尝试寻找解决方案,他们都说遵循我的方式。这将背景图像缩放到正确的大小,但过渡无效。</p>
<p>我还尝试更改div,设置在div内有一个图像标签,但也失效了。</p>            
P粉821808309
P粉821808309

全部回复(1)
P粉156983446

事实证明,过渡不适用于自动和其他一些属性(覆盖、包含、继承、初始、未设置)。我找到的解决方案是使用 JavaScript 使用以下代码:

img.onload = function () {
    let height = img.naturalHeight;
    let width = img.naturalWidth;
    let ratio = height / width;
    img.surroundingDiv.bgSize = "" + ((1 / ratio) * 100) + "%";
    img.surroundingDiv.style.backgroundSize = this.surroundingDiv.bgSize;
};

transitionDiv.style.backgroundImage = "url(" + img.src + ")";
transitionDiv.onmouseenter = function () {
    this.style.backgroundSize = 100 + "%";
};
    
transitionDiv.onmouseleave = function () {
    this.style.backgroundSize = this.bgSize;
};

首先,我计算比率,以计算出当图像未悬停在其上方时要缩放图像多少。我必须通过在 div 中创建一个新属性 bgSize 并将其存储在那里,来存储要在 onmouseleave 事件中使用的该值。

然后,我使用 onmouseenteronmouseleave 事件来更改悬停在图像上时的图像大小。

我还删除了 css 文件中的 :hover 选择器,因为它现在已过时。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!