相关疑难解决方法(0)

我通过 css property 加载图像background，而不是使用src属性。但在这种情况下，alt文本也会显示出来。如何停止显示alt文本并仅在图像未加载时才显示

.test {
  display: block;
  width: 200px;
  height: 82px;
  background-size: 200px 82px;
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJr81CRJeZGFiBsA9_AOyyxegiIPctdcbNfHThnpnclmFH-mJwoQ");
}

<img class="test" alt="My background image">

在我看来,我有这个链接:

@Html.ActionLink(" ", null, null, new { @class = "Edit" })

我的编辑css类:

.Edit
{
    background: url("../Images/Edit.png") no-repeat;
    display: inline-block;
    height: 24px;
    width: 24px;
    vertical-align: middle;
    }

工作正常,但我希望当用户将链接悬停为替代文本时显示"编辑".任何帮助将不胜感激.

如果徽标图形文件未加载或丢失，如何显示文本而不是徽标？我有带有背景 PNG 图像的 div：

<div class="iHaveBgImage">
this text should be displayed if bg image is not loaded
</div>

.iHaveBgImage { background-image: url('img.png') }

它不必是纯 CSS，Javascript 解决方案是允许的。我正在考虑 onerror 事件，但它适用于图像，而不是具有图像背景的元素。

编辑：我被告知这已经被回答过，但还有另一种情况。我没有说可以改变DOM，只能应用CSS和JS。其次，在建议的其他解决方案中，我应该使用标题属性，我尝试了它，它不显示文本，只将其悬停。

我在页面顶部有一个带有图像的网站.该网站完全响应.

对于桌面视图,我为网站上的标题加载了一个特定的图像.对于移动视图,我有一个不同的图像.

在CSS中,我使用类似的东西:

 .headerimage { background:url(/images/header-desktop.png) no-repeat top left; }

 @media only screen and (max-width: 480px) {
    .headerimage { background:url(/images/header-mobile.png) no-repeat top left; }
 }

而在HTML中它只是 <div class='headerimage'></div>

我的问题是:如何添加ALT文本(就像我想要的IMG)标签,以便我的网站完全可以访问屏幕阅读器,我获得替代文字的SEO优势等？显然我可以切换到使用IMG标签,但是一旦我有两个IMG标签要处理,这将需要一些严重的黑客来保持响应.