html - 部分透明的背景图片

标签 html css background transparency transparent

我有一个问题,因为我还没有找到任何解决方案。

所以我有这张图片,如您所见,它在“中心”是完全透明的,在边框部分是透明的。我想要实现的是,“边框”应该是透明的,“中心”应该是红色的。但边框应该是完全透明的。所以在这种情况下,白色。

我不确定这是否可以用 CSS 或 HTML 实现,我之所以需要在 CSS 或 HTML 中这样做是因为我在数据库中循环,并且每条显示的记录都有不同的背景颜色,但“边界”应保持透明。所以用 10 种或更多颜色创建整个图像对我来说不是一个选择,因为那样网站可能会太重。

非常感谢你们,
标记

编辑:
http://i.imgur.com/yMRxtqY.png

所以更准确地说,我已经创建了另一个图像,这是我想要实现的。 一开始我得到了左侧的 2 个图像,顶部的第一个在中间是完全透明的,并且如您所见,边界上有大约 50% 的不透明度,所以部分透明。第二张只是一张图片,但第二张图片总是在变化,就像幻灯片一样。

右边的另一张图片将是最终结果,我设置了灰色背景以使其更加明显。所以我的想法是,这可能吗?我想要实现的是像这样剪切幻灯片图像边框。但我不想对幻灯片中的每张图片都进行 Photoshop,所以我在想,也许我可以用 CSS 实现类似的效果。我在考虑一些 z-index 之类的东西。但这不起作用,因为我得到的图像与我在顶部链接的图像类似。

这就是我得到的全部:http://i.imgur.com/g7xpgQG.png
我的问题是,我可以在部分透明的边框上看到图像,我想得到与右侧第一张图像类似的东西(当然没有蓝色的东西,我无法剪切它,我'我不是设计师 :P )

最佳答案

不确定这是否是您要查找的内容,但请查看此链接:http://css-tricks.com/transparency-in-web-design/ 您可能需要查看您正在使用的 PNG 文件格式。

关于html - 部分透明的背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18146058/

相关文章:

javascript - 带下拉菜单

类问题的javascript语法

html - 如何将容器定位在 <p> 元素内,文本在其周围流动?

javascript - IE 中的选择箭头下拉列表不同

c# - PictureBox透明控制

javascript - 尝试通过单击图像、jQuery、HTML、CSS 来更改背景图像

javascript - 向矩形光栅图像添加圆 Angular

Javascript 悬停不起作用

html - 在整个宽度上固定高度背景图像

ios - Alamofire 后台获取不处理更多请求