Question

在我的学校，他们说如果我们使用图像作为带有特殊字体的标题，这就是要走的路。现在，我正在尝试这个，但我真的不明白

1）你为什么要这样做

2）除非给出特定的高度，否则它似乎没有出现。

有人可以告诉我一个更好的方法吗，同时仍然这样做 <h1><span></span></h1>事情？

.title{
  background-image: url(...);
  background-repeat: no-repeat;
  /*it displays nothing now, only when I add a height here*/
}

.titlespan{
  visibility: hidden;
}

<h1 class="title"><span class="titlespan"></span></h1>

Answer 1

如果您想要显示图像而不是文字，那就足够了：

TestHost.WebSocketClient

h1 {
  background-image: url(...);
  background-repeat: no-repeat;
  width: 100px /* Image width */;
  height: 25px /* Image height*/;
  text-indent: -9999px; /* This hide text*/;
}

此技术用于为搜索引擎提供“SEO友好”文本，向用户显示图像。

Answer 2

您应该不仅使用h#作为图像，因为这些标记具有特殊含义。例如。 h1表示页面标题。

是的，如果您只有图像作为背景，那么您必须设置元素尺寸（默认情况下，所有块元素的宽度都设置为100%。）

我会使用简单的div（另一个选项是<img>标记，它会自动调整大小来源尺寸）：

#title {
  height: 50px;
  background: url('http://via.placeholder.com/50x50') repeat-x center center;
}

<div id="title"></div>

Answer 3

只要有内容就可以使用，或者你必须给出一个高度/宽度

targetTextView.get().setText("")

.title{
  background-image: url(https://media-exp1.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png);
  background-repeat: no-repeat;
  /*it displays nothing now, only when I add a height here*/
}

.titlespan{
  visibility: hidden;
}

Answer 4

我是学生，在学校他们说这是我们要走的路使用图像作为标题，带有特殊字体，例如

使用带有书面文字的图像以这种方式替换标题不是一个好主意，因为尺寸和分辨率可能会在不同的屏幕上以不同的方式显示文本（图像文本）。

如果图像只是背景，那么这种方法似乎是正确的。文本在<span>标记内完成，而这些标记又可见而不是隐藏。

可以为CSS中的h1或span设置特殊字体。（在示例中，字体是从HTML中的谷歌字体链接的）

＆＃13;

.title{
  background-image: url(https://png.pngtree.com/thumb_back/fh260/back_pic/00/05/81/6456279a0080dd1.jpg);
  background-repeat: no-repeat;
  text-align:center;
}

.titlespan{
  font-family: 'Crimson Text', serif; 
  color:white;
  
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet"> 
<h1 class="title"><span class="titlespan">This is the title</span></h1>

＆＃13;

在CSS中使用照片<h1>

4 个答案: