gpt4 book ai didi

css - polymer 元素不显示使用自定义 CSS 属性传递的背景图像

转载 作者:太空宇宙 更新时间:2023-11-04 11:01:36 25 4
gpt4 key购买 nike

我无法理解为什么我无法将背景图像的自定义 CSS 属性传递给 polymer 元素。使用 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>

我有两个问题:

  1. 为什么这不起作用?
  2. 解决这个问题的最佳方法是什么?

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

谢谢!

保罗

最佳答案

您混淆了 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 属性。

关于css - polymer 元素不显示使用自定义 CSS 属性传递的背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34252340/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com