Question

我需要从超链接向左右添加小图像。这将在不同的图像上重复使用几次，因此我需要在CSS中使用类来实现。我已经成功到达了左侧http://jsfiddle.net/XAh2d/9257/

.fuss {background: transparent url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png) center left no-repeat; padding-left: 20px;}

或向右http://jsfiddle.net/k59zhwg3/1/

.fuss {background: transparent url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png) center right no-repeat; padding-right: 20px;}

但是当我尝试对左右使用两个类时，它没有用，只显示了一张图像：http://jsfiddle.net/7jcqxa3v/10/

.fuss-rechts {background: transparent url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png) right no-repeat; padding-right: 20px;}
.fuss-links {background: transparent url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png) left no-repeat; padding-left: 20px;}

 in HTML: <a class="fuss-links fuss-rechts" target="_blank" href="https://elternwerkstatt.domaincontrol.at">hier mein link</a>

任何帮助表示赞赏！谢谢

Answer 1

您可以像这样修改CSS类以实现它：

    .fuss {
       background: transparent;
       background-image: url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png), url(https://elternwerkstatt.domaincontrol.at/wp-content/uploads/2018/09/fusspaar-rot_18px.png);
       background-position:left,right;
       background-repeat: no-repeat, no-repeat;
       padding-left:20px;
       padding-right:20px;
     }

Answer 2

是的，这是预期的行为。 CSS类fuss-links将覆盖background设置的fuss-rechts规则，因为它在样式表中排在第二位，因为CSS规则集对最后的规则进行了优先排序（因此，C用于级联CSS）。

据我所知，仅使用CSS background规则是无法实现预期效果的，因为它不允许您仅在边缘重复元素，因此您永远不能重复或在整个宽度上重复（来源：https://css-tricks.com/almanac/properties/b/background-repeat/）。

我的建议是将图像移动到<img>标记内的<a>标记，并使用position: absolute;获得所需的效果。您可以在这里看到任何示例：

https://jsfiddle.net/7jcqxa3v/22/

左右添加图像以与CSS类链接

2 个答案: