定制 IBM Cognos 8 UI (8)

xiaoerp

6. 示例 3 — 使用背景图片
背景
在 CSS 文件中，除了指定常规的十六进制颜色之外，您还可以使用背景图片。事实上，许多 Web 站点都依赖背景图片来提供良好的颜色渐变效果。这也适用于 IBM Cognos 8 。

图 56. 使用背景图片

创建背景图片
创建背景图片的最便捷方式是使用 PowerPoint 。遵循以下步骤创建图片：
1. 打开 PowerPoint 。
2. 使用绘图工具，将一个“rectangle ”对象拖放到幻灯中。

图 57.将对象拖放到幻灯中

3. 双击新的对象。
4. 在“Color: ”拾色器中选择 “Fill Effects” 。

图 58.在拾色器中选择颜色

5. 选择双色渐变。

图 59.选择双色渐变

6. 在 PowerPoint 中，重新调整该对象的大小使其与目标位置相当。例如，如果您想将其用作标题，则 “纵向” 调整它的大小以获得适当的尺寸。
7. 将该对象复制粘贴到 Paint 。
8. 进入 Image > Attributes 检查图片的大小。IBM Cognos Connection 的标题的高度一般为 25 个像素，这可以作为参考。
9. 进入 Images > Stretch and Skew 纵向调整图片直到合适为止。
10. 将该图片保存到 branding 或 portal/images 文件夹下。
11. 对想要创建的所有图片重复这些步骤。
为风格添加背景图片
在这个例子中，我们将查看如何快速更改 IBM Cognos Connection 中的标题，不过这里的方法原则适用于其他组件。
“background-image ”和“background-repeat ”参数可用于任何风格属性，不管默认情况下是否使用了它们。此外，background-image 参数的优先级别高于 background-color 参数。这意味着如果它未出现在属性中，那么可以添加它。例如，在上面的屏幕截图中，更改了以下参数：
.mainHeader1
{
  border-right: #fffff 1px solid;
  border-left: #fffff 1px solid;
  border-bottom: #afbac7 0px solid;
  height: 25px;
  background-image: url(images/header3.bmp);
  background-color: #336699;
  background-repeat: repeat;
  background-position: left bottom;
}
.mainHeader2
{
  border: #e3e9f3 0px solid;
  padding: 0px;
  height: 25px;
  background-image: url(images/header4.bmp);
  background-repeat: repeat;
}
.mainHeader3
{
  padding-top: 5px;
  background-image: url(images/header5.bmp);
  background-repeat: repeat;
  border: #e3e9f3 0px solid;
}
.tabNormal
{
  padding-right: 20px;
  padding-left: 20px;
  font-size: 70%;
  color: #ff0000;
  text-align: center;
  background-image: url(images/portaltab.bmp);
  background-repeat: repeat;
  border-top: #afbac7 1px solid;
  border-left: #afbac7 1px solid;
  border-bottom: #afbac7 1px solid;
}
.tabNormalAfterSelected
{
  padding-right: 20px;
  padding-left: 20px;
  font-size: 70%;
  color: #ff0000;
  text-align: center;
  background-image: url(images/portaltab.bmp);
  background-repeat: repeat;
  border-top: #afbac7 1 px solid;
  border-bottom: #afbac7 1 px solid;
}
   

图 60.为风格添加背景图片

.boxHeaderBackground
{
  background-color: #99aacc;
  background-image: url(images/header4.bmp);
  background-repeat: repeat;
}
      

图 61.为风格重复添加背景图片



该贴已经同步到 xiaoerp的微博

whkkly

{:soso_e179:}