Question

所以我有这样的风格，当标题浓缩时，它将背景变为红色，当标题处于其完整大小时，它会显示背景

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);
    }
  }

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

Answer 1

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

＆＃13;

<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>

＆＃13;

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

1 个答案: