css - 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 文件(直接位于元素的 Content 文件夹中)并为 msls-footer css 规则添加以下附加声明来轻松实现:

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

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

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

如果您想将图像的大小设置为浏览器宽度的 8%，您可以向 css 规则添加额外的背景大小声明，例如:

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

显示以下内容: