Question

我通常能够通过一些试验和错误解决简单的CSS问题（或者我认为）。但是我整天都在尝试这一点而没有运气。在这一点上，我不知道该怎么做。

我试图将图片置于页面顶部。我也在使用模板，默认情况下有文本。我想我可以用图像替换标题文本，这样就可以了。我错了。

为了更好地了解我在做什么，这里是github模板的图片。我所指的部分是“样本标题”：https://gyazo.com/89d3c00988ce270845b0fe67b55ee5f3

标题的代码如下所示：

.page-header {
  color: #fff;
  text-align: center;
  background-color: #159957;
  background-image: linear-gradient(120deg, #155799, #159957); }

@media screen and (min-width: 64em) {
  .page-header {
    padding: 5rem 6rem; } }

@media screen and (min-width: 42em) and (max-width: 64em) {
  .page-header {
    padding: 3rem 4rem; } }

@media screen and (max-width: 42em) {
  .page-header {
    padding: 2rem 1rem; } }

.project-name {
  margin-top: 0;
  margin-bottom: 0.1rem; }

@media screen and (min-width: 64em) {
  .project-name {
    font-size: 3.25rem; } }

@media screen and (min-width: 42em) and (max-width: 64em) {
  .project-name {
    font-size: 2.25rem; } }

@media screen and (max-width: 42em) {
  .project-name {
    font-size: 1.75rem; } }

.project-tagline {
  margin-bottom: 2rem;
  font-weight: normal;
  opacity: 0.7; }

@media screen and (min-width: 64em) {
  .project-tagline {
    font-size: 1.25rem; } }

@media screen and (min-width: 42em) and (max-width: 64em) {
  .project-tagline {
    font-size: 1.15rem; } }

Header部分的样式表如下所示（项目名称部分似乎与Sample Title部分相关）：

{{1}}

我已经尝试了我所知道的所有内容，试图将图片（一个小徽标）放在中心，样本标题文本没有运气。我已经尝试用50％和自动，绝对位置以及更改浮动来做边距。我已经尝试编辑proeject-name样式表信息，并为图片提供ID并以这种方式进行编辑。它总是在一些奇怪的位置结束，我无法让它工作。任何帮助都会非常有用！

Answer 1

您应该将图像添加到源中，如下所示：

<h1 class="project-name">
    <img src="http://c3154802.r2.cf0.rackcdn.com/ssplogo.jpg"/>
</h1>

不需要额外的CSS。它会将您的图像置于页面顶部。

<强> PS

src属性应包含有效的URL。由于URL中不允许使用空格字符，因此必须对它们进行编码。

这不是现在的：

<img id="Statslogo" src="assets/Stats Logo2.png" width="640" height="200"/>

Currect版本：

<img id="Statslogo" src="assets/Stats%20Logo2.png" width="640" height="200"/>

尝试通过CSS将图片置于页面顶部

1 个答案: