我知道我无法使用 CSS 更改标签的src属性。<img>但是是否有可能从 src 属性中隐藏图像，并在<img>标签上设置背景图像？
我想是这样的：将带有填充/文本意图等的实际图像移出视图，然后设置 img-tag 的背景图像，因此它看起来像另一个图像。
Js 不是一个选项，因为它是关于模板化现有页面。
问问题
489 次
4 回答
2
你可以隐藏图像本身：
img#someid { display: none; }
然后（或在此之前，如果您愿意）在父元素上设置背景。
于 2012-04-12T07:47:55.713 回答
0
我不太确定“隐藏 src 属性的图像”是什么意思，但如果您的意思是使用 CSS（甚至作为背景图像）隐藏正在显示的图像的链接/路径，那么答案是否定的，不是我知道的。人们可以轻松查看您的 CSS 文件。隐藏它的唯一真正方法是使用 JS，但即使这样，您也可以从客户端禁用 JS 并仍然查看它。您可以将其放入 MySQL 之类的数据库中并使用 PHP 显示它，但即便如此，图像路径仍会显示。
于 2012-04-12T07:48:31.100 回答
0
您能否将 img 包装在没有填充/边距的 div 中，并将 img 的显示属性设置为隐藏（通过 js），以便显示 div 的背景。
但老实说，如果你不厌其烦地这样做，你应该只是通过js交换图像的src。
于 2012-04-12T07:48:44.453 回答
0
您可以通过将 img src 指向 1x1 空白 gif 图像来做到这一点。
如果您不想添加另一个 div，这是必要的，因为所有浏览器都以不同的方式处理丢失的图像和空 src 属性。（例如，如果图像丢失，chrome 会在图像周围添加边框。）
然后，您只需更改 background-image 属性即可更改图像。
更新
您还可以为此创建图像精灵并通过更改背景位置属性为它们设置动画。例如：
假设您有两个 50 像素宽的图像，并且您希望在该元素悬停时显示第二个图像。只需将它们合并到一个图像中，上面的 css 就可以了。
img { background: url(sprite.jpg) 0 0 no-repeat; }
img:hover { background: url(sprite.jpg) -50px 0 no-repeat; }
于 2012-04-12T08:29:33.250 回答