Question

我找到了一个很好的免费tumblr主题，并使用了我有限的知识来改变背景，但是制作主题的人没有使主题的任何图标或资产透明，所以我周围有巨大的黑盒子一切，虽然我能够在Photoshop中解决大部分问题，但有一个我似乎无法工作。以下是我认为相关的所有代码：

.link .container { padding: 0 0 0 240px; }
    .link .link-wrap { position: relative; width: 590px; min-height: 90px; }
    .link .hand { position: absolute; top: 0; right: 0; width: 165px; height: 90px; background: {color:Accent} url("http://static.tumblr.com/gpln05e/BgCdi9xSQ/link-hand.png") no-repeat 100% 0; }
    .link h2 { font-size: 200%; margin-right: 165px; background: {color:Accent} url("http://static.tumblr.com/gpln05e/F8chS9xSQ/link-top.png") no-repeat 0 0; }
    .link h2 span { display: block; padding: 35px 0 20px 20px; background: transparent url("http://static.tumblr.com/gpln05e/5GBYS9xSQ/link-bot.png") no-repeat 0 100%; }
    .link h2 a:link, .link h2 a:visited { color: #fff; }
    .link h2 a:hover, .link h2 a:active { text-decoration: none; border-bottom: 1px dotted #fff; }
    .link .content { padding: 0 260px 0 20px; margin-top: 10px; }
    .link .meta { top: 35px; }

我刚从代码中直接撕掉了我需要的图像，并且使我需要的部分透明，但它似乎不起作用。

The Problem

我认为问题在于，你看到的部分是紫红色实际上是图像的透明部分，代码的另一部分告诉你是什么设置为强调颜色，我相信这是部分：

    <meta name="color:Accent" content="#ee3322" />

在这种情况下，我需要一种方法来更改代码，以便将某种不透明的颜色更改为强调颜色，这样我不想要的所有黑色都可以透明。

如果我上面提供的内容不够，这里是完整代码的pastebin的链接。

Pastebin of full code

Answer 1

变量转换

可以使用变量转换将hex颜色转换为rgb：http://www.tumblr.com/docs/en/custom_themes#variable-transformations

在这种情况下，请在自定义变量名称前添加RGB。

示例1（硬编码Alpha）

元标记：

<meta name="color:Accent" content="#ee3322" />

CSS：

.link h2 {background: rgba({RGBcolor:Accent},0.5)}

输出：

.link h2 {background: rgba(238,51,34,0.5)}

示例2（自定义变量Alpha）

元标记：

<meta name="color:Accent" content="#ee3322" />
<meta name="text:AccentOpacity" content="0.5" />

CSS：

.link h2 {background: rgba({RGBcolor:Accent},{text:AccentOpacity})}

输出：

.link h2 {background: rgba(238,51,34,0.5)}

示例2 的好处是主题的用户可以调整alpha / opacity。为简单起见，我称之为不透明。

希望有所帮助。

试图使tumblr主题的资产透明化

1 个答案:

变量转换