技巧25：如何将背景图像添加到窗体

部分文章为机器自动翻译，文中可能有文法错误或语义模糊之处。我们会努力让文章对您更有帮助，您可在本文下方评论区告诉我们是否对您有帮助。您也访问原文链接切换至英语以参考原始内容。

原文链接：https://help.zoho.com/portal/en/community/topic/tip-25-how-to-add-background-images-to-forms

嗨，大家好，

目前，世界正处于困难时期，我们希望大家都保持安全。

我们在此提供了另一个Creator提示-这次是有关如何向表单添加背景图像的提示。有时，要添加一些上下文或使您的表单看起来更好一些，您可能需要在表单中添加背景色或图像。让我们看一下完成工作所需的三个简单步骤。

用例

在此示例中，我们有一个“  新订单”表单，我们想在上面添加公司徽标，以帮助建立更好的品牌召回率并与我们的客户建立联系。

申请流程

1 。 创建  新订单 表单，该表单将帮助客户下订单。 

2.使用HTML代码片段创建页面以嵌入表单。 

3.使用CSS代码添加背景图像。

以下是一些从头开始将背景图像添加到表单中的快速步骤：

步骤1：使用所有必填字段创建新订单表单 

以下是订购单上的字段：

• 销售负责人（查找字段）
  

• 客户（下拉字段）
  

• 订单日期（日期字段）
  

• 送货机构（下拉字段）
  

• 预计交货日期（日期字段）
  

• 产品（下拉字段）
  

• 数量（数字字段）
  

• 总计（货币字段）
  

• 税（百分比字段）
  

• 净合计（货币字段）
  

第2步：创建页面并向其中添加HTML代码段

 

我们需要将表单嵌入页面中，以便可以添加所需的样式元素。您需要做的就是 

将HTML代码段拖放到页面上，然后向其中添加以下代码：

1. <div elName='zc-component' formLinkName='Order'
   
2. params='zc_Header=false&amp;zc_SuccMsg=Data Added
   
3. Successfully!&amp;zc_SubmitVal=Submit&amp;zc_ResetVal=Reset'>Loading Form...</div>
   

此处的“订单”是表单的表单链接名称。您还可以使用iframe HTML标签将表单嵌入到iframe中。 

第3步：将CSS代码粘贴到HTML代码段中

我们需要使用CSS来指定方面，例如字体的大小和字体，文本和背景的颜色，图像的对齐方式，在元素边框之间添加空格等。

 

您可以使用以下CSS代码添加背景图片：

1. <style>
   

2. .zcform_FormLinkName .formContainer {
3. background-image:url(<Image URL>);
4. background-size:cover;
5. <\style>

在此代码中：

FormLinkName： 表单名称，如表单URL中所示。

图片网址： 一个图像的公开网址要在窗体的背景显示 

注意

• 您可以使用“ background-size” CSS样式自定义背景图片的大小。 
  

• 在表单链接名称和.formContainer之间使用单个空格字符  -使此CSS样式起作用很重要。
  

• 当表单中有子表单或任何隐藏字段时，请避免使用此属性，因为它会根据添加的子表单行增加表单的高度，这会导致背景图像自动放大。
  

以下是此页面的外观：

容易吧？你应该试试看！如果在将图像添加到表单时遇到任何困难，请在下面发表评论，我们很乐意为您提供帮助。

• Related Articles

• 技巧20：如何在子表单中自动填充值

  原文链接：https://help.zoho.com/portal/en/community/topic/tip-20-how-to-autopopulate-values-in-a-subform 嘿伙计， 我们知道许多人在您的应用程序中广泛使用子表单，因为它有助于您更有效地完成工作。在本技巧中，我们将向您展示如何使用称为“行”的特殊语法在子表单中自动填充值。 让我们来看一个例子。 考虑您有一个应用程序，您需要根据该应用程序在用户单击子表单中的“ ...

• 技巧16：如何隐藏客户数据以确保隐私。

  原文链接：https://help.zoho.com/portal/en/community/topic/tip-16-how-to-mask-customer-data-to-ensure-privacy 嗨伙计，  作为用户，我们经常不愿透露我们的联系电话或电子邮件地址，因为我们不想被通讯，促销信息或销售电话所困扰。在本技巧中，我们将讨论如何只需单击几下即可屏蔽在Zoho Creator应用程序中输入的数据！ 什么是数据屏蔽？ ...

• 技巧14：如何迭代一组Deluge代码特定次数。

  原文链接：https://help.zoho.com/portal/en/community/topic/tip-14-how-to-iterate-a-set-of-deluge-code-a-specific-number-of-times 大家好， 您可能已经知道，递归函数用于  执行特定操作特定次数。我们已经在技巧2中对此进行了详细说明。同样，还有另一种方法可以迭代一组Deluge代码“ n”次。您需要做的就是创建一个列表，并使用“对于每个索引”任务对其进行特定次数的迭代。    ...

• 技巧4：如何以实时形式动态显示图像。

  原文链接：https://help.zoho.com/portal/en/community/topic/tip-04-how-to-dynamically-display-images-in-a-live-form 嗨，大家好， 我们希望前面的技巧对您在这里的许多人有用。我们回来了一个新的提示，它将有助于改善您的应用程序的用户体验。 是的，这是对的。今天，我们将研究如何以实时形式显示已使用其他Zoho ...

• 技巧3：如何使用URL参数动态过滤报告

  原文链接：https://help.zoho.com/portal/en/community/topic/tip-02-how-to-dynamically-filter-reports-using-url-parameters-22-3-2018 嗨伙计， 每两个星期，作为Zoho Creator-提示和技巧系列的一部分，我们今天回来了有关如何使用URL参数过滤报告的新提示。 ...