Question

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 ？

Answer 1

在每个div中插入背景图片样式属性：

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

没有必要让它复杂化。

Answer 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;
}

Answer 3

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

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

所以，像其他人一样，可以使用动态渲染页面，如php，jsp等等。

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

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

Answer 4

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

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

示例：

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

根据登录的人员，图像将根据数据库中的userID进行更改。

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

4 个答案: