有没有比 Photoshop/Fireworks 中的批处理更简单的方法来显示/创建翻转图像?

发布于 2024-10-16 12:00:23 字数 244 浏览 8 评论 0原文

有没有比 Photoshop/Fireworks 中的批处理更简单的方法来显示/创建翻转图像?

理想情况下,这可以通过 CSS 或 Javascript 来完成,当鼠标悬停在图像上时,以某种方式在图像上创建半透明的白色层。目前,我只使用 Photoshop 处理亮度 +10% 的图像,然后在 Dreamweaver 中使用查找/替换来完成其余操作。

如果不必为每张图片创建单独的翻转图像,那就太好了。谢谢!

Is there an easier way to display/create rollover images than batching in Photoshop/Fireworks?

Ideally this would be done through CSS or Javascript, somehow creating a semi-transparent white layer over an image when moused over. Currently I just have Photoshop process images with +10% brightness, and do the rest in Dreamweaver with find/replace.

It'd be nice not to have to create separate rollover images for each picture. Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

只想待在家 2024-10-23 12:00:23

使用CSS,您可以使用如下内容:

#navigation a { 
  background:url(image.png) no-repeat; 
  filter:alpha(opacity=100); 
  opacity: 1 }
#navigation a:hover { 
  filter:alpha(opacity=80); 
  opacity: 0.8 }

更多信息此处

Using css, you can use something like this:

#navigation a { 
  background:url(image.png) no-repeat; 
  filter:alpha(opacity=100); 
  opacity: 1 }
#navigation a:hover { 
  filter:alpha(opacity=80); 
  opacity: 0.8 }

More info here

二货你真萌 2024-10-23 12:00:23

对于图像,您并不总是需要为翻转创建新图像,您可以编辑 CSS 以降低元素的不透明度:

.myElement
{
   background.image: url(path/to/file/image.png);
}

.myElement:hover
{ 
   filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

另外,我认为您会从研究 CSS Sprites 中受益:

  1. CSS-tricks sprites 教程
  2. 单独的 CSS sprites 列表
  3. CSS sprites.com 生成器

With images you don't always have to create a new image for rollovers, you can edit the CSS to decrease the opacity of the element:

.myElement
{
   background.image: url(path/to/file/image.png);
}

.myElement:hover
{ 
   filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

Also I think you'd benefit from looking into CSS Sprites:

  1. CSS-tricks sprites tuorial
  2. A list apart's CSS sprites
  3. Css sprites.com generator
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文