0

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

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>
4

4 回答 4

2

如果您想显示图像而不是文本，这对您来说就足够了：

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

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

于 2017-11-17T11:35:27.627 回答
2

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

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

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

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

于 2017-11-17T11:42:17.387 回答
0

我是一名学生，在学校里，他们说如果我们使用带有特殊字体的图像作为标题，那么这就是要走的路。

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

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

并且可以在 CSS 中为 theh1或 the设置特殊字体。span（在示例中，字体是从 html 中的 google 字体链接的）

.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;
  
}
<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet"> 
<h1 class="title"><span class="titlespan">This is the title</span></h1>

于 2017-11-17T11:56:18.070 回答
0

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

.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;
}
<h1 class="title"><span class="spantitle">a</br>a</br>a</br>a</br>a</br>a</br>a</br></span></h1>

于 2017-11-17T11:35:46.317 回答