Question

我无法理解为什么我无法将背景图像的自定义CSS属性传递给聚合物元素。使用CCS属性进行样式设置此处解释了Polymer元素：https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details这适用于某些元素（例如下面代码中的灰色背景）。

<body>
    <dom-module id="my-element">
        <template>
            <style>
            :host {
                display: block;
                height: 300px;
                background-color: grey;
                color: var(--container-text, white);
                background-image: url(var(--container-background, 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg'));
                /* THIS WORKS
                background-image: url( 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg');
                */
            }
            </style>
            <div class='container'>Text color is correct, but no background image</div>
        </template>
        <script>
            Polymer({ is: 'my-element'});
        </script>
    </dom-module>
    <my-element></my-element>
</body>

我有两个问题：

为什么这不起作用？
解决此问题的最佳方法是什么？

代码在这里：http://jsbin.com/yuxobexepe/edit?html,output

谢谢！

保

Answer 1

您正在混合CSS属性的定义/用法。这是你问题的一个有效的JSBIN：

<html>
<head>
  <base href="http://polygit.org/polymer/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <dom-module id="my-element">
  <template>
    <style>
      :host {
        display: block;
        height: 300px;
        background-color: grey;
        color: var(--container-text, blue);
        background-image: var(--container-background, "default.png");

        --container-background: url( 'http://www.inflexusmgmt.com/wp-content/uploads/2014/08/Hero-material-graphene-1.jpg');
      }
    </style>
    <div class='container'>Text color is correct, but no background image</div>
  </template>
    <script>
    addEventListener('WebComponentsReady', function() {
      Polymer({ is: 'my-element'});
    });
    </script>
  </dom-module>

  <my-element></my-element>

</body>
</html>

background-image正在使用--container-background的值（如果存在），或默认为您提供的值。然后，通常在组件本身之外单独定义--container-background属性。

Polymer元素不显示使用Custom CSS属性传递的background-image

1 个答案: