Question

如何在图像上显示此表单并使其适合？

谢谢大家。

Answer 1

您可以通过css将图像设置为tabele的背景图像。

Answer 2

此代码应该适合您。

#sidebar {height:350px;
    width:auto; 
    background-image: url("http://www.insightcxo.com/wp-content/uploads/2015/07/blog-form-background1.png");
    background-size:cover;

}

如果它太靠近侧面，请根据需要添加边距。

编辑：

以下是我在fiddle中对您的主style.css所做的更改，以使您的输入字段正确显示：

我添加了css

#inf_field_FirstName {
margin-top:200px; /*this line*/
width: 330px;
text-align: center;
}

label.FName{margin-top:200px!important;} /*I created this label class*/

我将Fname类添加到您的名字标签中。瞧！

Answer 3

您应避免在图像中使用文本（或至少有意义的副本）。屏幕阅读器无法呈现它，并且它不会有助于您可能因SEO原因而找到的任何关键字。在修复方面，从图像中删除假文本，将图像设置为表单容器的背景图像（抱歉，无法在手机上检查您的代码），然后添加包含有关表单的图像文本的段落......

Answer 4

我尝试了background-image，但它不起作用。如果实际希望将其覆盖在图片上，请添加以下内容：

img.aligncenter.size-full.wp-image-1012{
    position: absolute;
    left: 40px; <-- to keep the same distance, alter if you want to   
}

table.bodyContainer.webFormBodyContainer{
    position: relative;
    top: 170px;
}

我的意思是，我确实得到了它：

http://imgur.com/fYUdVFG

是的...因为表单的背景总是白色的，如果你想将它放在图像上，它会突出并弄乱图像渐变。我无法帮助你。这是我最接近的。

将表单悬停在图像HTML / CSS上

4 个答案: