在 paper-scroll-header-panel 中动态更改背景 url

Question

所以我有这样的风格，当 header 压缩时，它会将其背景更改为红色，当 header 处于全尺寸时，它显示背景

paper-scroll-header-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--paper-grey-100);

    --paper-scroll-header-panel-full-header: {
      background-image: url(images/bg1.jpg);
    }

    --paper-scroll-header-panel-condensed-header: {
      background-color: var(--paper-red-700);
    }
  }

问题是我动态加载图像背景 url。使用javascript设置'--paper-scroll-header-panel-condensed-header'background-image的方法是什么？

Answer 1

您可以使用 css3 variables 和 updateStyles API 动态加载任何 css 属性.

的值

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<dom-module id="variable-background">
  <template>
    <style>
      :host {
        --image-url: url(http://www.freedigitalphotos.net/images/img/homepage/87357.jpg);
        background-image: var(--image-url);
        display: block;
        height: 100px;
      }
    </style>
    <div on-tap='changeBackground'>Tap me</div>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'variable-background',
    changeBackground: function() {
      var obj = {
        '--image-url': 'url(http://mediafiles.allaboutsymbian.com/808/zeiss/g.jpg)'
      };
      this.updateStyles(obj);
    }
  })
</script>


<variable-background></variable-background>

在 paper-scroll-header-panel 中动态更改背景 url

Change background url dynamically in paper-scroll-header-panel

html

javascript

css

polymer-1.0