Question

我正在尝试实现一个简单的VF选项卡式界面。我在“images”文件夹中上传了一个包含背景图片的zip文件，并将所需的css上传为

     <style type="text/css">body { background-image: url("images/back.jpeg") }

以下是我的实施方式。

    <apex:page id="thePage" sidebar="false" showHeader="false" tabstyle="Invoice_Statement__c"        standardController="Invoice_Statement__c" standardStylesheets="false">
   <apex:image url="{!$Resource.header}" width="1250" />
   <apex:stylesheet value="{!URLFOR($Resource.myStyles, 'styles.css')}"/>
   <style type="text/css">
   p { background-color: ;}
       tabPanel{ background-color:blue;}
       .activeTab {background-color: #236FBD; color:white; background-image:none}
       .inactiveTab { background-color: lightgrey; color:black; background-image:none}
   </style>

   <apex:tabPanel switchType="client" selectedTab="name1" id="theTabPanel" tabClass="activeTab"    inactiveTabClass="inactiveTab">
   ..
   ..
   ..
    </apex:tabPanel>
    </apex:page>

我的问题是背景没有显示。我按照这个链接 - ＆gt; http://www.salesforce.com/us/developer/docs/pages/Content/pages_styling_custom.htm 我用过

   <apex:image url="{!$Resource...}" width="1250" />

它的工作正常，但我无法获得我的应用程序的背景图像。有什么建议吗？

提前致谢 MNZ

Answer 1

与引用静态资源中存储的样式表的方式没什么不同。

<apex:stylesheet value="{!URLFOR($Resource.myStyles, 'styles.css')}"/>

您必须遵循相同的原则在tour css中添加对静态资源的引用。关键点是您的样式声明需要位于VF页面上，以便由force.com服务器呈现。假设您的图像forlder在myStyles zip文件中作为静态资源：

<style type="text/css">body { background-image: url("{!URLFOR($Resource.myStyles, 'images/back.jpeg')}") }

Answer 2

在CSS文件中（在静态资源内）在图像之前添加“../”并添加一些样式：

body {
background: url("../images/back.jpeg") no-repeat top fixed;
background-size: 100%;
}

visualforce背景图像不显示

2 个答案: