我想让一个div具有玻璃反射外观和半透明效果。如何将这两种效果结合起来，以便div看起来像一个玻璃透明小工具？有办法做到这一点吗？
div的背景颜色是lightskyblue，尚未设置背景图像。
div的背景颜色是lightskyblue，尚未设置背景图像。
如何制作具有玻璃质感和半透明效果的div？
5
- Selvin
2
你能否将效果以图片的形式展示，并放在你的问题中？这样我们可以更好地帮助你。 - Starx
@starx 那个 div 可以变成玻璃或冰的，不是吗？ - Selvin
6个回答
7
你可以在背景颜色中使用透明度。
例如：
例如：
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格式，并且全都使用十六进制。就像上面的示例一样，以下是值如何分配的：
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 *
}
- Starx
4
您的回答的第一部分是我需要的。我只需要div背景是透明和玻璃般的效果，而不是div的内容。但是当我尝试使用rgba(255,255,255,0.5)时，它只显示浅色，我没有得到玻璃般的效果。 ;( - Selvin
1@selvin，那是一个例子。你的背景已经是蓝色了。我会为你创建一个fiddle。 - Starx
IE 7和IE8不支持background: rgba(255,255,255,0.5); - Nazmul
虽然透明效果已经在一定程度上达到，但并没有玻璃效果。 - Selvin
4
使用渐变CSS属性可以创建光泽效果。
对于Firefox，请使用
你可以添加任意数量的颜色来获得所需的外观。对于IE，请使用filter属性。 https://developer.mozilla.org/en/CSS/-moz-linear-gradient
对于Firefox，请使用
background: -moz-linear-gradient(90deg, red, white, blue);
或者
background: -moz-linear-gradient(top,#000,#444 45%, #777 45%, #555);
你可以添加任意数量的颜色来获得所需的外观。对于IE，请使用filter属性。 https://developer.mozilla.org/en/CSS/-moz-linear-gradient
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是不透明度值。现在，父元素可以拥有自己的不透明度值，这不会被其子元素继承。这完全得到FireFox、Opera、Chrome、Safari和IE9的支持。
在http://jsfiddle.net/Rp5BN/查看工作示例
要支持IE 5.5到8，我们需要使用厂商特定的CSS“gradient filter:”。因此，您需要添加以下内容。
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);
其中，7f代表127，即50%的不透明度，404040是颜色。
在IE中查看工作示例http://jsfiddle.net/Rp5BN/2/
- Hussein
2
只要你提供相应的
background: rgba(256,256,256,0.5);
对于IE，使用以下滤镜
{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/
- sandeep
1
你可以在这里找到一个演示链接
如果你的浏览器不支持CSS3功能，你可以试试这个。我使用了两个DIV，一个用于内容，另一个用于玻璃效果。我将它们的位置都设为绝对定位，并使用z-index来显示一个div在另一个div上面。
复制代码并在您的浏览器中尝试它。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Glass Effect</title>
<style type="text/css">
body{
background-color:#AA3333;
}
div#content{
position:absolute;
z-index:99;
top:100px;
left:100px;
width:400px;
height:300px;
}
div#glass{
position:absolute;
z-index:100;
top:100px;
left:100px;
background-color:#777777;
opacity:0.20;
filter:alpha(opacity=20);
width:400px;
height:300px;
}
</style>
</head>
<body>
<div id="content">
<p>
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</p>
</div>
<div id="glass">
</div>
</body>
</html>
- Nazmul
1
对于“玻璃”效果，我认为获得透明度只是第一步。个人认为，“玻璃”的效果还需要斜线形式的背景图案（玻璃的光泽和光亮？）这需要某种CSS（+确保在调整大小时不会出现问题）。
同样地，对于“冰”的效果，我个人认为你需要一个类似霜的区分，这通常是不同的、随机放置/重复的图像效果。
同样地，对于“冰”的效果，我个人认为你需要一个类似霜的区分，这通常是不同的、随机放置/重复的图像效果。
- Richard Neil Ilagan
0
我很好奇是否可以做到这一点，但没有找到一个好的例子，所以我会在2020年更新它。
我用了几种方法：
对角线透明-不透明交替渐变反射
backdrop-filter: blur( - 不是所有浏览器都支持，在2020年默认情况下不支持Firefox
或者使用JavaScript克隆和filter: blur(特效
// for only bottom div
const pre = document.getElementsByTagName("pre")[0];
const background = document.getElementsByClassName("background")[0];
const glossy3 = document.getElementsByClassName("glossy3")[0];
// clone it
var blurit = pre.cloneNode(true);
// make it blurit class
blurit.classList.add("blurit");
// attach to background too
background.appendChild(blurit);
const redraw = async () => {
// get dimentions of glossy3 div
const size = glossy3.getBoundingClientRect();
const presize = pre.getBoundingClientRect();
const divScrolledY = background.scrollTop
// apply these dimentions to blured background clip-path (crop)
blurit.style.clipPath = `inset(
${size.top + divScrolledY}px
${presize.width - size.right}px
${presize.height - size.bottom - divScrolledY}px
${size.left}px
round ${ window.innerWidth * 0.02 }px
)`;
// 10 milisecond pause
await new Promise(res => setTimeout(res, 10));
// call yourself recursively via browser friendly method
window.requestAnimationFrame(redraw);
}
/* call it once to loop forever - better than any timer */
redraw();.glossy1 {
/* blurs background */
backdrop-filter: blur(4px) brightness(1.1) contrast(0.9) saturate(1.1);
/* uses transparent background for glare */
--col1: rgba(255,255,255, 0.3);
--col2: rgba(255,255,255, 0.8);
background: linear-gradient(-45deg, var(--col1) 0%, var(--col2) 33%, var(--col1) 66%, var(--col2) 100%);
/* background-color does nothing while gradient is up but this works for another tint: */
box-shadow: inset 0 0 0 100vw rgba(0, 0, 150, 0.05);
/* at same div level need this */
z-index: 2;
}
.glossy2 {
/* blue tint */
box-shadow: inset 0 0 0 100vw rgba(20, 20, 150, 0.09);
/* uses transparent background for glare */
--col1: rgba(255,255,255, 0.80);
--col2: rgba(255,255,255, 0.99);
background: linear-gradient(-45deg, var(--col1) 0%, var(--col2) 33%, var(--col1) 66%, var(--col2) 100%);
/* background-color does nothing while gradient is up but this works for another tint: */
box-shadow: inset 0 0 0 100vw rgba(0, 0, 150, 0.05);
/* at same div level need this */
z-index: 2;
}
.glossy3 {
z-index: 2;
/* blue tint */
box-shadow: inset 0 0 0 100vw rgba(20, 20, 150, 0.09);
/* uses transparent background for glare */
--col1: rgba(255,255,255, 0.3);
--col2: rgba(255,255,255, 0.8);
background: linear-gradient(-45deg, var(--col1) 0%, var(--col2) 33%, var(--col1) 66%, var(--col2) 100%);
}
/* js adds on clipPath on top of this to crop it only under glossy3 */
.blurit {
position: absolute;
top: 0;
left: 0;
/* more supported filter */
color: black;
z-index: 1;
filter: blur(4px) brightness(1) contrast(1) saturate(0.9);
/* blocks other pre layer */
background-color: rgba(255,255,255, 0.9);
}
@supports (backdrop-filter: blur(1px)) {
.glossy {
/* can put stuff here */
}
}
@supports not (backdrop-filter: blur(1px)) {
.glossy {
/* can put stuff here */
}
}
.irrelevant {
/* irrelevant stuff */
top: 50%;
left: 50%;
display: block;
position: fixed;
box-sizing: border-box; /* includes padding in calculation */
transform: translate(-50%, -50%);
/* styling because why not */
padding: calc(2 * (1vw + 1vh));
font-size: calc(1.5 * (1vw + 1vh));
text-align: center;
border-radius: 2vw;
width: 80%;
}
.irrelevant1 {
top: 20%;
}
.irrelevant3 {
top: 80%;
}
/* making background with text and random image so can see div effects better */
body, html {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: calc(1 * (1vw + 1vh));
background-color: lightblue;
overflow-x: hidden;
overflow-y: hidden;
}
.background,
.background::before {
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.background::before {
content: "";
background-image: url("https://i.imgur.com/up3AMmC.jpg");
background-repeat: repeat;
background-size: cover;
background-position: center;
opacity: 0.25;
z-index: -2;
}
.background {
overflow-y: scroll;
}
pre {
/* color: transparent; */
margin: 0;
padding: 0;
}<div class="glossy1 irrelevant1 irrelevant">
backdrop-filter blur effect <br>
for chrome and others<br>
firefox not support by default yet (2020)
</div>
<div class="glossy2 irrelevant2 irrelevant">
basic glare gradient only<br>
even firefox can do
</div>
<div class="glossy3 irrelevant3 irrelevant">
javascript with blur on cloned layer <br>
+ glare gradient<br>
even firefox can do
</div>
<!-- background stuff -->
<div class="background">
<pre style="white-space: pre-line; ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris cursus dui eu lacus pretium malesuada. Suspendisse potenti. Maecenas sit amet vestibulum quam. Suspendisse iaculis sed sem venenatis mattis. Vestibulum sed imperdiet justo. Nunc pharetra ante vitae ligula faucibus ullamcorper. Proin rutrum leo est, eu convallis arcu rutrum vel.
Duis congue enim quis mauris tincidunt ornare. Nullam vehicula diam vel erat ornare, et posuere enim dapibus. Vestibulum aliquam semper tortor, vel fringilla eros faucibus in. Suspendisse potenti. Nam aliquam mi nisl, eu porta eros auctor maximus. Proin tempus vestibulum nisi, a hendrerit quam varius a. Donec dui massa, rhoncus ut commodo non, eleifend vitae mauris. Nam pharetra lobortis magna eget pretium. Donec non gravida velit, et malesuada massa. Nullam iaculis, neque tincidunt cursus maximus, nisl ligula mattis felis, ac molestie lectus eros sed dolor. Nullam vel condimentum justo. Aliquam scelerisque eget metus non ornare.
In nulla tellus, consectetur vitae mattis sed, imperdiet luctus odio. Pellentesque metus dolor, maximus posuere rutrum et, condimentum quis erat. Donec rhoncus metus sit amet tortor lobortis tincidunt. Praesent arcu orci, fermentum auctor eros id, bibendum aliquam diam. Curabitur aliquet vel massa ac cursus. Mauris molestie convallis nisi, sit amet vestibulum turpis consectetur quis. Vivamus ut convallis enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quis lectus vitae turpis dictum elementum.
Nullam ultricies mi in rhoncus vestibulum. In ultrices convallis enim, ut pretium urna elementum nec. Cras quam leo, consequat non elit dapibus, ultricies consectetur est. Vivamus bibendum justo a felis rutrum tincidunt. Morbi sit amet nulla porttitor, tempus lacus eget, sollicitudin velit. Nunc non nulla turpis. Sed dictum dictum eros, sagittis fermentum felis pretium a. Etiam a nunc ante. Cras pharetra mi eros, a aliquam mi faucibus in.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus non aliquam leo. Fusce faucibus volutpat magna et tempor. Praesent in lorem a tortor pulvinar laoreet. Curabitur sit amet justo non massa aliquet pulvinar id vitae sem. Maecenas ullamcorper, felis sed volutpat aliquam, mauris odio pharetra diam, in vestibulum ante tellus vitae est. Suspendisse efficitur massa leo, non maximus risus molestie quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas tempus venenatis est vel sagittis. Fusce scelerisque mauris purus, a ornare est semper eget. Fusce commodo malesuada libero, imperdiet ullamcorper nibh rutrum quis. Donec quis ex eu diam varius pretium ut eget diam. Vivamus in interdum enim.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus non aliquam leo. Fusce faucibus volutpat magna et tempor. Praesent in lorem a tortor pulvinar laoreet. Curabitur sit amet justo non massa aliquet pulvinar id vitae sem. Maecenas ullamcorper, felis sed volutpat aliquam, mauris odio pharetra diam, in vestibulum ante tellus vitae est. Suspendisse efficitur massa leo, non maximus risus molestie quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas tempus venenatis est vel sagittis. Fusce scelerisque mauris purus, a ornare est semper eget. Fusce commodo malesuada libero, imperdiet ullamcorper nibh rutrum quis. Donec quis ex eu diam varius pretium ut eget diam. Vivamus in interdum enim.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus non aliquam leo. Fusce faucibus volutpat magna et tempor. Praesent in lorem a tortor pulvinar laoreet. Curabitur sit amet justo non massa aliquet pulvinar id vitae sem. Maecenas ullamcorper, felis sed volutpat aliquam, mauris odio pharetra diam, in vestibulum ante tellus vitae est. Suspendisse efficitur massa leo, non maximus risus molestie quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas tempus venenatis est vel sagittis. Fusce scelerisque mauris purus, a ornare est semper eget. Fusce commodo malesuada libero, imperdiet ullamcorper nibh rutrum quis. Donec quis ex eu diam varius pretium ut eget diam. Vivamus in interdum enim.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus non aliquam leo. Fusce faucibus volutpat magna et tempor. Praesent in lorem a tortor pulvinar laoreet. Curabitur sit amet justo non massa aliquet pulvinar id vitae sem. Maecenas ullamcorper, felis sed volutpat aliquam, mauris odio pharetra diam, in vestibulum ante tellus vitae est. Suspendisse efficitur massa leo, non maximus risus molestie quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas tempus venenatis est vel sagittis. Fusce scelerisque mauris purus, a ornare est semper eget. Fusce commodo malesuada libero, imperdiet ullamcorper nibh rutrum quis. Donec quis ex eu diam varius pretium ut eget diam. Vivamus in interdum enim.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus non aliquam leo. Fusce faucibus volutpat magna et tempor. Praesent in lorem a tortor pulvinar laoreet. Curabitur sit amet justo non massa aliquet pulvinar id vitae sem. Maecenas ullamcorper, felis sed volutpat aliquam, mauris odio pharetra diam, in vestibulum ante tellus vitae est. Suspendisse efficitur massa leo, non maximus risus molestie quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas tempus venenatis est vel sagittis. Fusce scelerisque mauris purus, a ornare est semper eget. Fusce commodo malesuada libero, imperdiet ullamcorper nibh rutrum quis. Donec quis ex eu diam varius pretium ut eget diam. Vivamus in interdum enim.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus non aliquam leo. Fusce faucibus volutpat magna et tempor. Praesent in lorem a tortor pulvinar laoreet. Curabitur sit amet justo non massa aliquet pulvinar id vitae sem. Maecenas ullamcorper, felis sed volutpat aliquam, mauris odio pharetra diam, in vestibulum ante tellus vitae est. Suspendisse efficitur massa leo, non maximus risus molestie quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas tempus venenatis est vel sagittis. Fusce scelerisque mauris purus, a ornare est semper eget. Fusce commodo malesuada libero, imperdiet ullamcorper nibh rutrum quis. Donec quis ex eu diam varius pretium ut eget diam. Vivamus in interdum enim.
</pre>
</div>- ildarmgt
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接