Html 使用外部CSS可以做到这一点吗？

考虑一下：

HTML:

这个例子演示了我想要实现的目标

HTML由Rails 3应用程序生成。它应该显示特定组中的所有用户（此信息存储在数据库中）。换句话说，要显示的用户列表可能会有所不同

问题是我不想有这样的代码：

#username {
    background-image: url('/path/to/username/sprite');
}

对于每个现有用户名。此外，如果添加了新用户，我不想更改CSS

---

问题是：使用外部CSS是否可能达到相同的效果？

您可以将图像移动到HTML中，然后让CSS像设置一样对图像应用悬停标记

很难测试，因为映像主机不喜欢热链接。看看这里

HTML

---

如果您的外部css文件是静态的，那么从逻辑上讲，这是不可能的，因为url信息是动态的

编辑： 如果我理解正确，您的问题不是让悬停技巧工作（因为它工作…），而是如何为每个div设置背景图像属性（每次不同的值-动态信息）

所以，像这里的其他人一样，我们可以使用动态呈现页面，比如php、jsp等等

也就是说，也许您可以在服务器端使用一个动态css文件进行写入。（但这很奇怪）

---

你所说的外部是什么意思？完全来自不同机器的单独文件或css文件

据我所知，更改这些图像的唯一方法是为每个用户将其设置为更改（动态）。假设他们照片的路径存储在数据库中，您可以使用php或其他动态语言在html模板中嵌入一个img元素，其中src是动态的

例如：

<?php
function getUserImage(){
 //code to get img path from database
 return result;
}
?>
<img src="<?php print getUserImage(); ?>" alt="" />

“alt=”“/>

---

根据登录用户的不同，图像将根据数据库中的用户ID而变化。

只需在每个

div中的background image style属性中插入即可：

<div style="background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png');" id="julia" class="photo"></div>
<div style="background-image: url('http://www.mypicx.com/uploadimg/1932001963_05012011_1.png');" id="rachel" class="photo"></div>
<div style="background-image: url('http://www.mypicx.com/uploadimg/2082029375_05012011_3.png');" id="martin" class="photo"></div>



没有必要把它复杂化。
我想用
img
，但我不知道如何使它工作。你的例子和我的不一样：（获取照片的链接不是问题。我想主要问题是：是否可以使用
img
创建精灵？我以为精灵在大图像上刚刚被操纵到位？但是css中加载了不同的图像。也许可以尝试smartsprites。我自己没有使用过它，但看起来精灵的文档非常丰富；）在您的示例中，我看不到任何图像。我很想知道悬停状态是什么样子。我相当确定这就是您需要做的。内联样式并不是为了让人们懒惰而放在那里的。它们有时是正确的方式。这是我实际上想做的。但令人惊讶的是，它不起作用：
    <div id="julia" class="photo"><img src="http://www.mypicx.com/uploadimg/1312875436_05012011_2.png"/></div>
<div id="rachel" class="photo"><img src="http://www.mypicx.com/uploadimg/1932001963_05012011_1.png"/></div>
<div id="martin" class="photo"><img src="http://www.mypicx.com/uploadimg/2082029375_05012011_3.png"/></div>

.photo img {
     width: 60px;
    height: 60px;
    display: inline-block;
}
.photo img:hover {
     background-position: -60px 0;
}

<?php
function getUserImage(){
 //code to get img path from database
 return result;
}
?>
<img src="<?php print getUserImage(); ?>" alt="" />

<div style="background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png');" id="julia" class="photo"></div>
<div style="background-image: url('http://www.mypicx.com/uploadimg/1932001963_05012011_1.png');" id="rachel" class="photo"></div>
<div style="background-image: url('http://www.mypicx.com/uploadimg/2082029375_05012011_3.png');" id="martin" class="photo"></div>