Question

我的母版页中有一个Polymer app-header元素。我想在向下滚动时从图像转换为纯色。为此，根据documentation，我需要在样式表中向我的应用程序标题添加Range("Table1[B]").Select ActiveSheet.ShowDataForm自定义属性。这是我的母版页：

--app-header-background-rear-layer

这是我在css文件中的app-header：

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="DarkSoulsMaster.Master.cs" Inherits="DarkSouls.DarkSoulsMaster" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>   
    <link rel="stylesheet" href="stylesheets/main.css" type="text/css"/>
    <script>
      Polymer = {
        lazyRegister: true,
        useNativeCSSProperties: true
      };
    </script>
    <link rel="import" href="bower_components/polymer/polymer.html" />
    <link rel="import" href="bower_components/app-layout/app-toolbar/app-toolbar.html"/>
    <link rel="import" href="bower_components/app-layout/app-header/app-header.html"/>
    <link rel="import" href="bower_components/app-layout/app-scroll-effects/app-scroll-effects.html"/>
    <link rel="import" href="bower_components/app-layout/app-header-layout/app-header-layout.html"/>
    <link rel="import" href="bower_components/app-layout/app-drawer/app-drawer.html"/>
    <link rel="import" href="bower_components/app-layout/app-drawer-layout/app-drawer-layout.html"/>
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html" />
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="bower_components/paper-item/paper-item.html" />
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js" ></script>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form" runat="server">
        <div style="overflow: auto;">
            <app-header-layout>
                <app-header condenses shadow fixed effects="resize-title blend-background">
                    <app-toolbar>
                        <div style="color: white; font-size: 36px; margin:auto" class="title-main" condensed-title>Dark Souls</div>
                        <paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
                    </app-toolbar>
                    <app-toolbar>
                        <div style="transform-origin: top, center; color: white;" class="title-main" main-title>Dark Souls</div>
                    </app-toolbar>
                </app-header>
                <app-drawer-layout>
                    <app-drawer id="drawer" align="right" persistent="false">
                        <div style="height: 100%; background-color: white; padding-top:256px;">
                            <paper-icon-item>
                                <iron-icon icon="home" item-icon></iron-icon>
                                דף הבית
                            </paper-icon-item>
                        </div>
                    </app-drawer>
                        <div class="main">
                            <asp:ContentPlaceHolder ID="MainContent" runat="server">
                            </asp:ContentPlaceHolder>
                        </div>
                 </app-drawer-layout>
            </app-header-layout>
        </div>
    </form>
</body>
</html>

问题是图像没有出现。只能看到坚实的蓝灰色标题。我很确定问题出在自定义属性中：app-header { background-position-x: 60%; background-position-y: 15%; height: 256px; background-color: #263238; --app-header-background-rear-layer: { background: linear-gradient(rgba(38, 50, 56, 0.5), rgba(38, 50, 56, 0.5)), url(../res/header.jpg);  }; }因为它是唯一不会改变网站外观的东西。

Answer 1

应在自定义样式元素--app-header-background-rear-layer中使用像<style is="custom-style">这样的聚合物自定义CSS属性。

因此，您应该使用内联<style is="custom-style">元素，或将其导入<link rel="import" href="style.css">元素。

聚合物中的自定义属性不起作用

1 个答案: