1

我有一个带有大背景图片的网站。现在我想添加也有背景图像的圆形按钮/链接。

它在 Chrome 和 IE 中呈现良好，但 Firefox 显示一个丑陋的盒子，与它background-color相同<body>。

一旦您将 background-attachment: fixed;外部容器与border-radius圆形按钮结合起来，问题似乎就会出现。

我想这是一个 Firefox 错误。有人有解决方法吗？

PS：如果我在这里通过“运行代码片段”运行它，它会在 Firefox 中正确呈现！这是为什么？！

Chrome/IE（两个圆圈都是正确的）：

在此处输入图像描述

Firefox（第二个圆圈，粉红色框有background-attachment: fixed;，已损坏）：

火狐

body {
	background-color: gray;
}
#wrapper1 {
	width: 100px;
	height: 100px;
	background-image: url("http://www.edda-hsu.net/images/ProductImages/Fabrics/BasicFabrics/smooth-velvet-magenta.jpg");
	margin-bottom: 40px;
}
#wrapper2 {
	width: 100px;
	height: 100px;
	background-image: url("http://www.edda-hsu.net/images/ProductImages/Fabrics/BasicFabrics/smooth-velvet-magenta.jpg");
	background-attachment: fixed;		/* PROBLEM */
}
.box {
	display: block;
	background-image: url("https://d2d00szk9na1qq.cloudfront.net/Product/ac6714d6-578e-42d4-b81f-aaf7a7e5d580/Images/Large_CV-174.jpg");
	background-attachment: fixed;
	border-radius: 50%;			/* PROBLEM */
	width: 50px;
	height: 50px;
}
<body>

	<div id="wrapper1">
		<div class="box"></div>
	</div>
	
	<div id="wrapper2">
		<div class="box"></div>
	</div>
	
</body>

4

0 回答 0