Question

我在这里做错了吗？出于某种原因，当我点击屏幕上的 任何地方 而不仅仅是下面的图像时，我的纸张波纹正在发生？我弄乱了语法吗？文件不是很清楚......

<polymer-element name="sound-card">
<template>
    <style>
        /*snip*/
        .soundcard-img {
            height: 77%;
            width: 100%;
        }

        paper-ripple {
            color: #00ca92;
        }
    </style>
    <div class="soundcard-container" vertical layout>
        <img src="../img1.jpg" class="soundcard-img">
        <paper-ripple fit></paper-ripple>
        <div horizontal layout center justified>
            <div>test</div>
            <a href="#"></a>
        </div>
    </div>
</template>

<script>
    Polymer({
        ready: function() {
        }
    });
</script>
</polymer-element>

我是否需要在聚合物定义的元素而不是div中包含纸张纹波？我的容器div设置为200x260px，如果这是相关的！谢谢！

Answer 1

查看网页检查器时，问题似乎是<paper-ripple>元素的大小覆盖整个页面。在该元素requires上使用fit属性：

注意：使用fit属性时，必须有一个容器固定大小并具有position: relative布局。就是这样孩子们知道在哪里适合。

将style="position:relative"添加到声卡容器元素（或任何其他添加样式的方式）对我来说是稳定的。

纸张波纹遍布整个屏幕而不是包含在我的元素中？

1 个答案: