0

我找到了一个不错的免费 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; }

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

问题

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

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

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

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

完整代码的Pastebin

4

1 回答 1

0

变量变换

可以将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。为简单起见，我将其称为不透明度。

希望有帮助。

于 2013-10-18T18:06:40.327 回答