如何制作具有玻璃和半透明效果的div？
我想给div一个玻璃reflection外观以及半透明效果。 如何将这两种效果结合起来，使div看起来像一个玻璃透明的小工具？ 有没有办法做到这一点？
div的bgcolor是lightskyblue，还没有设置背景图像。
您可以在背景颜色中提供alpha透明度。
例如
div { background: rgba(255,255,255,0.5); /* white color with 50% transparency */ } 在IE但是， rgba不起作用。 你需要使用filter。
例如
div { background: transparent; -ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr=#77ffffff, endColorstr=#77ffffff)"; /* For IE8 */ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#77ffffff, endColorstr=#77ffffff); /* < IE 7 */ zoom: 1; }
开始和结束颜色中的颜色模式与RGBA的颜色模式不同，它是用户ARGB格式，全部是hex。 与上面的示例类似，以下是值的分布方式
77: alpha (fully transparent: 00, fully opaque: FF) ff: Red ff: Green ff: Blue
此方法将在您的分区上放置透明背景，但如果您希望整个div是透明的，包括内部的所有内容，那么您可以使用opacity属性
例如
div { background: #fff; opacity: 0.5; /* This is not support in IE though, use filter if needed in IE * }
演示
使用“渐变CSS”属性可以创建光泽效果。
适用于Firefox
background: -moz-linear-gradient(90deg, red, white, blue);
要么
background: -moz-linear-gradient(top,#000,#444 45%, #777 45%, #555);
您可以添加任意数量的颜色，以获得正确的外观。 https://developer.mozilla.org/en/CSS/-moz-linear-gradient
对于IE，请使用filter属性
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
查看http://jsfiddle.net/gkyg3/1/上的工作示例
对于透明度您需要在容器div上使用RGBA背景属性。 background: rgba(64, 64, 64, 0.5) 。 64,64,64是RGB颜色值。 0.5是不透明度值。 现在，父级可以拥有自己的不透明度值，不会被其子级inheritance。 FireFox，Opera，Chrome，Safari和IE9完全支持此function。
查看http://jsfiddle.net/Rp5BN/上的工作示例
为了支持IE 5.5到8，我们需要使用特定于供应商的CSS’渐变filter：’所以你需要添加它。
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);
其中7f代表127，即50％不透明度和404040是颜色。
查看IE http://jsfiddle.net/Rp5BN/2/中的工作示例
它很简单，你唯一能做的就是给予
background: rgba(256,256,256,0.5);
＆for IE使用此filter
{background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF); /* IE6 & 7 */ zoom: 1;}
有关IE中颜色透明度的更多信息，请阅读有关hsla颜色的内容： http ：//greenevillage.net/csspages/hsla.aspx
编辑
对于玻璃般的外观你可以使用这样的渐变http://jsfiddle.net/sandeep/hfTdw/5/
对于“玻璃”效果，我认为获得透明度只是第一步。 就个人而言，“玻璃”还需要对角背景文物（玻璃的光泽和光泽？），我认为需要某种CSS（+确保它在resize时不会弯曲）。
同样地，对于“冰”，我个人认为你需要一种霜状的区别，这通常是一种完全不同的随机放置/重复的图像伪像。
你可以在这里找到一个演示
如果您的浏览器不支持CSS3function，您可以试试这个。 我使用了两个DIV，一个用于内容，另一个用于玻璃效果。 我让他们的位置绝对。 除此之外，z-index还用于将div显示在另一个之上。
复制代码并在浏览器中尝试。
Glass Effect Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum