是否可以使用外部 CSS 来做到这一点？答案

【问题标题】：Is that possible to do this using external CSS?是否可以使用外部 CSS 来做到这一点？
【发布时间】：2011-08-16 07:52:09
【问题描述】：

考虑following example：

HTML：

<div id="julia" class="photo"></div>
<div id="rachel" class="photo"></div>
<div id="martin" class="photo"></div>

CSS：

.photo {
    width: 60px;
    height: 60px;
    display: inline-block;
}
.photo:hover {
    background-position: -60px 0;
}
#julia {
    background-image: url('http://www.mypicx.com/uploadimg/1312875436_05012011_2.png');
}
#rachel {
    background-image: url('http://www.mypicx.com/uploadimg/1932001963_05012011_1.png');
}
#martin {
    background-image: url('http://www.mypicx.com/uploadimg/2082029375_05012011_3.png');
}

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

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

问题是我不想拥有这个代码：

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

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

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

【问题讨论】：

我在您的示例中看不到任何图像。我很想知道悬停状态是什么样的。

标签： html ruby-on-rails css css-sprites

【解决方案1】：

只需在每个div 中嵌入 background-image 样式属性：

<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>

没有必要让它变得复杂。

【讨论】：

我很确定这是您需要做的。内联样式并不是为了让人们变得懒惰而放在那里的。它们有时是正确的方法。
这就是我真正想做的事情。但是，令人惊讶的是，它不起作用：stackoverflow.com/questions/5846637/…

【解决方案2】：

您可以将图像移动到您的 HTML 中，然后让您的 css 将悬停标签应用于图像，就像您设置它一样。

很难测试，因为图像主机不喜欢盗链。看这里fiddled

HTML

    <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>

CSS

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

【讨论】：

我想使用img，但我不知道如何使它工作。你的例子和我的不一样:(

【解决方案3】：

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

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

例子：

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

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

【讨论】：

获取照片的链接不是问题。我猜的主要问题是：可以使用img 创建精灵吗？
我以为精灵是在大图像上，只是在位置上进行了操作？但是您在 css 中加载了不同的图像。
也许可以试试 smartsprites。我自己没有使用过它，但是对于 sprite 来说，它的文档看起来很不错；）csssprites.org

【解决方案4】：

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

编辑：如果我理解正确，您的问题不是使悬停技巧起作用（因为它有效......），而是如何为每个 div 设置 background-image 属性（每次都使用不同的值- 动态信息）。

所以，就像这里的其他人所说的可以使用动态渲染页面，如 php、jsp 等。

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

http://css-tricks.com/can-we-prevent-css-caching/

【讨论】：