Lightswitch HTML - 添加图像到命令栏

Question

我知道这是可行的，但是我的 CSS 技能不是最好的，所以有人可以帮助我或指出正确的方向。

我在找什么：（在 Lightswitch HTML 屏幕底部的命令栏右下角添加图像）

需要编辑的代码在msls-2.5.1.css文件中，据我所知在.msls-footer标签下，我想在最右边添加一个静态图像，大约为屏幕宽度的 8%，以免图像变形太多。

感谢您对此的支持，不胜感激！！

影响大小的代码：

.msls-footer {
    width: 100%;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .msls-footer.ui-page-footer-fixed {
        padding-bottom: 0;
    }

.msls-footer-content {
    margin-right: auto;
}

    .msls-footer-content:not(.msls-footer-content-active) {
        display: none;
    }

影响命令栏颜色的代码：

.ui-bar-a {
    border: 1px solid #456f9a /*{a-bar-border}*/;
    background: #244689 /*{a-bar-background-color}*/;
    color: #fff /*{a-bar-color}*/;
    font-weight: bold;
    text-shadow: 0 /*{a-bar-shadow-x}*/ 1px /*{a-bar-shadow-y}*/ 1px /*{a-bar-shadow-radius}*/ #3e6790 /*{a-bar-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #244689 /*{a-bar-background-start}*/), to( #244689 /*{a-bar-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient( #244689 /*{a-bar-background-start}*/, #244689 /*{a-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient( #244689 /*{a-bar-background-start}*/, #244689 /*{a-bar-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient( #244689 /*{a-bar-background-start}*/, #244689 /*{a-bar-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient( #244689 /*{a-bar-background-start}*/, #244689 /*{a-bar-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient( #244689 /*{a-bar-background-start}*/, #244689 /*{a-bar-background-end}*/);
}

Answer 1

这可以通过更新 user-customization.css 文件（直接位于项目的内容文件夹中）并为 msls-footer [=32] 添加以下附加声明来轻松实现=] 规则：

.msls-footer {
    background-image: url(images/ajax-loader.gif); 
    background-repeat: no-repeat;
    background-position: right;
}

这将增强标准的 LightSwitch 页脚样式并产生以下外观：

根据您的问题，上面的示例将 msls-buttons-row 浮动到左侧；它还使用动画 LightSwitch 加载器作为演示图形（只需更改 url 以指向您想要的图像）。

如果您想将图像的大小调整为浏览器宽度的 8%，您可以在 css 规则中添加额外的 background-size 声明，例如：

.msls-footer {
    background-image: url(images/ajax-loader.gif); 
    background-repeat: no-repeat;
    background-position: right;
    background-size: 8% 100%
}

要显示以下内容：

Lightswitch HTML - 添加图像到命令栏

Lightswitch HTML - add image to command bar

css

visual-studio-lightswitch

lightswitch-2013