Question

Is there any way how to hide span text inside a href tag and replace it with image?

This is my HTML code that I don't want to modify:

<div id="social" class="icons">
        <a href="http://twitter.com/" class="twitter"><span>Twitter</span></a>
        <a href="http://www.facebook.com/" class="fb"><span>Facebook</span></a>
        <a href="http://www.linkedin.com/" class="linkedin"><span>Linked In</span></a>
</div>

In CSS file I'm trying to hide <span>Twitter</span> and replace it by image like that:

.icons .twitter span {
    display: none;
}
.icons .twitter a {
    text-decoration:none;
    background:url('images/i_twitter.png') no-repeat;
}

My issue code内的图片中替换文字。

Answer 1

它没有显示，因为在将public void checkTilt() { if (!isGrounded) { float tiltSpeed = 10.0f; float x = Input.acceleration.x; Vector2 tilted = new Vector2(x, 0); myRigidBody.AddForce(tilted * tiltSpeed * Time.deltaTime); } }设置为范围时，您的锚点没有大小。一种可能的解决方案是将图像设置为伪元素，如display:none

＆＃13;

:before

＆＃13;

.icons .twitter span {
  display: none;
}
.icons .twitter:before {
  text-decoration:none;
  content: url('http://ecowoodsvillage.com/wp-content/uploads/2013/09/twitter-icon-small.png');
}

＆＃13;

Answer 2

更改链接显示并添加宽度和高度：

.icons .twitter span {
    display: none;
}
.icons > a {  
    display: inline-block;
    width: 64px;
    height: 64px;
    text-decoration:none;
}
.icons .twitter {
    background:url('http://ecowoodsvillage.com/wp-content/uploads/2013/09/twitter-icon-small.png') no-repeat;
}

https://jsfiddle.net/03wg6vzw/

Answer 3

你走在正确的轨道上。

通过在display: none;上设置span，您实际上会导致a没有维度（锚点的宽度和高度为auto，并且没有什么可以“支撑”它打开，所以你可以看到你的背景图像。）

您需要为链接指定显式宽度和高度，并将其display从默认值（inline）更改为允许设置宽度和高度的内容，例如{ {1}}。

inline-block

Answer 4

将显示设置为内联块并设置元素的宽度和高度应该有效。

Dim CompareRange As Variant, To_Be_Compared As Variant, j As Variant, k As Variant

Range("AT2").Select
Selection.End(xlDown).Select
Set To_Be_Compared = Range("AT2:" & Selection.Address)
Range("AU2").Select
Selection.End(xlDown).Select
Set CompareRange = Range("AU2:" & Selection.Address)


To_Be_Compared.Select

    For Each j In Selection
        DoEvents
        For Each k In CompareRange
            If j = k Then j.Offset(0, 2) = j
        Next k
    Next j

Answer 5

从类声明中删除.count-display { height: 35px; width: 65px; background: black; color: red; display: flex; float: left; align-items: center; border-radius: 5px; //why is this needed margin-top: -60px; margin-left: 40px; font-family: Orbitron, sans-serif; font-size: 200%; }，然后添加下一个样式：

Answer 6

您甚至不需要跨越标签。这可以删除。你可以为每个班级做到这一点。

a.twitter {
  display: block;
  text-indent: -9999px;
  background: url('images/i_twitter.png') no-repeat;
  width: 32px;
  height: 32px;

Answer 7

将范围设置为color:transparent。

.icons a span {
    color: transparent;
}
.icons .twitter {
    text-decoration:none;
    background:url('http://ecowoodsvillage.com/wp-content/uploads/2013/09/twitter-icon-small.png') no-repeat;
}

https://jsfiddle.net/gmu4m6yy/6/

CSS会在标记<a href="">

7 个答案: