使用CSS3的transition属性来实现淡入/淡出效果,避免使用jQuery中的fadeIn/fadeOut方法。
确认背景图片的大小与表单容器大小相同,且背景图片没有被平铺或拉伸。
使用CSS的background-size属性将背景图片的大小设置为cover,即尽可能大地覆盖表单容器大小,避免出现图片重复或拉伸。
代码示例:
HTML:
CSS:
.form-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url('path/to/background-image.jpg');
background-size: cover;
opacity: 0; /* initially hide the form */
transition: opacity 1s ease-in-out;
}
.form-container.show {
opacity: 1; /* show the form */
}
JavaScript:
// when the page is fully loaded
$(document).ready(function() {
// show the form container
$('.form-container').addClass('show');
});
上一篇:表单弹出窗口函数未定义
下一篇:表单导航问题