Question

我想我应该通过说我正在研究一个tumblr主题来开始这个。这就是链接代码的样子：

a {
        color: {color:Text};
        text-decoration: none;
        padding: 3px;
        border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -o-border-radius: 10px;
        background: #C1FFC1;
            transition: all 0.3s ease-out;
            -webkit-transition: all 0.3s ease-out;
            -moz-transition: all 0.3s ease-out;
            -o-transition: all 0.3s ease-out;
    }

现在这段代码完美无缺;然而，链接的图像 - 几乎每张照片都是一个链接 - 显示为绿色背景，这对文本很好，但对于图片来说很难看。

我尝试使用以下代码来摆脱这个：

a img {
         border-width: 0px; 
         background: none;
}

然而，这并没有起作用，背景仍然存在。

如果您有任何人想要查看我的主题，请点击此处链接：http://queenquagsire.tumblr.com（我想应该说，因为这不是专业网站，我只是将它用于测试目的 - 有些，所有 - 这些帖子非常幼稚。）

绿色背景有点难以看清，但它背后是影像中心，并且突出。此外，当您将鼠标悬停在它上面时，它会消失。

我觉得这很简单，但我似乎无法修复它;我已经访问过其他网站并尝试了他们的解决方案，但没有运气。

另外，我确实尝试将链接代码更改为此

p a {
        color: {color:Text};
        text-decoration: none;
        padding: 3px;
        border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -o-border-radius: 10px;
        background: #C1FFC1;
            transition: all 0.3s ease-out;
            -webkit-transition: all 0.3s ease-out;
            -moz-transition: all 0.3s ease-out;
            -o-transition: all 0.3s ease-out;
    }

所以它只会影响段落，但这会搞砸其他一些事情。

有人可以帮忙吗？我是否必须编辑链接代码？

Answer 1

在决定如何设置该元素的样式时，CSS无法查看元素的子元素。您必须更改模板的HTML部分，才能为图片帖子（例如image-post）添加一个特殊类，然后专门为所有a个元素设置样式：

.image-post a {
    background: none;
}

历史记录： An old draft of CSS3 from 2001确实指定了可用于选择元素内容的伪类。但是，所有后续草稿都将该部分删除了。

如何摆脱链接图像的背景？

1 个答案: