在 CSS 中定义图像，而不是在 HTML 中

Question

我遇到了问题，我不确定到底出了什么问题。

我有一个 HTML 页面，我的图片目前是这样链接的。

<span class="tribar" onclick="openNav()"><img src="url_here"></span>

我试图从 HTML 源代码中删除所有图像 url，并将它们放在 css 中。这是我试过的。

<span class="tribar" onclick="openNav()"></span> // HTML

.tribar {
display: inline-block;
background-image: url("image_url") no-repeat top left;
width: 220px;
height: 220px;
}

但我的 HTML 跨度出现空白，我似乎无法弄清楚。

这应该是一个简单的错误。

Answer 1

我建议使用 <button>:

function opennav() {
  alert("Hello!");
}

.nav-button {
  border: none;
  background: none;
  font-size: 0; /*hide alt text*/
}

.nav-button:before {
  display: inline-block;
  content: url(http://placekitten.com/220/220);
  width: 220px;
  height: 220px;
  cursor: pointer;
}

<button class="nav-button" onclick="opennav()">Alt text for screen readers</button>

另见 CodePen。

Answer 2

您不能在 "background-image:" 属性中使用 "no-repeat" 值。您应该在 CSS 样式中添加这两行：

background-position: top left;
background-repeat: no-repeat;

如果你想在一行中完成，你应该使用"background:" 属性:

background: url("image_url") no-repeat top left;

参考
https://www.w3schools.com/cssref/pr_background-image.asp
https://www.w3schools.com/cssref/css3_pr_background.asp

Answer 3

只要link的url或按钮的代码保留在页面上，css就可以保留图像源。

我推荐这种方式：

a {
  display: block;
  width: 220px;
  height: 220px;
}

.tribar {
  display: block;
  background-image: url("https://jobadder.com/wp-content/uploads/whosebug.com-300.jpg");
  background-size: contain;
  width: 100%;
  height: 100%;
}

<a href="#"><span class="tribar" /></a>

在 CSS 中定义图像，而不是在 HTML 中

Define image in CSS, not in HTML

html

css

background-image