gpt4 book ai didi

html - HTML 元素溢出中的图像

转载 作者:技术小花猫 更新时间:2023-10-29 11:41:10 25 4
gpt4 key购买 nike

Chrome 和其他浏览器为 html 元素提供了过度滚动(也称为 flex 滚动或橡皮筋滚动)。 (参见 herehere 。)

我想要 html 中的图像作为复活节彩蛋过度滚动,有点像 Slack iOS 复活节彩蛋。 (请参阅屏幕截图中的“您是最新的。”。)

Enter image description here

CSS

html {
background: green;
}

给溢出一个颜色。图片无效:

html {
background: url(image.png);
}

如何将图像放入 html overflow 中?

最佳答案

您可以在 Safari 上获得此结果(我在其他浏览器上没能做到这一点)。

HTML

<html>
<body>
<div class="body-wrapper">
Content goes here
</div>
</body>
</html>

CSS

/* --- Reset rubber effect on the 'html' tag --- */
html {
overflow: hidden;
height: 100%;
}

body {
height: 100%;
overflow: auto;
}
/* ------------ end reset ------------ */

html {
background-color: white;
background-image: url("http://www.freebordersandclipart.com/images/EasterEggThree.png");
background-repeat: no-repeat;
background-size: 6%;
background-attachment: fixed;
background-position: 50% 10px;
}

.body-wrapper {
background-color: white;
}

您必须删除 html 元素上的默认橡胶效果(因为您不能将图形放在 html 父元素上 - 没有 html 父)。body 具有橡胶效果和透明背景 - 缺少背景很重要,因为橡胶效果会扩展这种颜色并且可以与复活节彩蛋图形重叠。 .body-wrapper 有背景颜色来隐藏复活节彩蛋。

Here你可以看到效果(在桌面上它只适用于 Safari)。

关于html - HTML 元素溢出中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37228829/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com