好的......所以这就是问题所在.
我有一个CSS精灵图像,由十(10)个25px x 25px图标组成,水平排列 - 从而产生250px宽的精灵图像.
我使用这些25x25图像作为缩略图.我希望在INITIAL视图中对这些图像的不透明度为30%,当用户将鼠标悬停在它们上方时,不透明度需要为100%(1).
所以我所做的是创建一个第二行图像,其不透明度为30% - 所以现在我有一个250px x 50px的精灵图像.前25px为100%,下25px为30%.
我按如下方式设置HTML:
<a href="largeimage1.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb1"></a>
etc...
Run Code Online (Sandbox Code Playgroud)
和CSS:
a { display: block; float: left; width: 25px; height: 25px; background: url("250_x_50_spriteimage.jpg") 0 -25px no-repeat; }
.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }
a:hover { **background-position-y**: -25px; }
Run Code Online (Sandbox Code Playgroud)
但是,遗憾的是,这似乎不起作用,因为Firefox不支持background-position-y(或者不是标准的,但是IE特定的).
我们的想法是,我们(仅)想要将精灵图像向上移动(沿y轴)并保持x轴不变(或在之前的类中设置).
如果没有简单的CSS解决方案 - 这种不透明效果可以通过JQUERY完成吗?所以拇指会以30%的不透明度加载并在用户徘徊时转换为100%不透明度?
非常感谢,
M.
我有一个电子商务网站,其中有大约8个CSS文件从标题链接 - 导致8个单独的http请求到服务器.我将所有CSS文件合并为一个大文件,产生一个67kb(!)文件 - 将我们的css文件的http请求减少到1.
我发现这个大小的CSS文件有点难以管理,因为我不断在网站上进行更新.我担心的是我的用户可能会在更新过程中看到我并在页面移动时看到非样式页面 - b/c 67kb仍需要2-3秒才能通过FTP成功放置在远程服务器上.
我的问题是:在这个大型CSS文件中使用@import将文件分解成更小的更易于管理的大小(在CSS文件中)是否会在加载页面时将我们带回原来的8个http请求?或者CSS中的@imports以某种方式处理不同?
使用javascript,我们如何自动将当前的DATE和TIME插入到表单输入字段中.
我正在构建一个"问题"表单,以跟踪用户提交的有关某项服务的投诉.我正在收集尽可能多的信息.我想在这里节省员工每次打开表单时手动输入日期和时间.
我有这段代码:
<input id="date" name="date" value="javascript:document.write(Date()+'.')"/>
Run Code Online (Sandbox Code Playgroud)
但它不起作用.
非常感谢任何帮助.
我担心我们网站主页上的加载时间.
我的主页使用默认样式表,其中包含整个站点的所有样式.我有其他页面上的元素的背景图像引用(即未在主页上使用).当用户访问网站的主页时,这些背景图像图形是否会被加载?
或者是唯一加载的css背景图像是直接在该页面上使用的那些?