Javascript 如何制作具有玻璃状和半透明效果的div？

How to make a div with glassy and semi transparent effect?

提问by Selvin

I want to give a div a glassy reflection appearance as well as a semi transparent effect. How can I combine these two effects so that the div will look like a glassy transparent gadget? Is there a way to do this?

我想给一个 div 一个玻璃状的反射外观以及一个半透明的效果。如何将这两种效果结合起来，使 div 看起来像一个玻璃透明的小工具？有没有办法做到这一点？

The div's bgcolor is lightskyblue and no background image is set yet.

div 的 bgcolor 是 lightskyblue 并且还没有设置背景图像。

回答by Starx

You can give alpha tranparency in your background color.

您可以在背景颜色中提供 alpha 透明度。

For example

例如

div { 
    background: rgba(255,255,255,0.5); /* white color with 50% transparency */
}

In IE However, rgbadoes not works. You need to use filter.

但是，在 IE 中rgba不起作用。您需要使用过滤器。

For Example

例如

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;
}

The color patter in both the start and end color is different than the way in RGBA, it user ARGBFormat and all in Hex. Like in above example, following are how the values are distributed

开始和结束颜色中的颜色模式与 中的方式不同RGBA，它是用户ARGB格式，并且全部为十六进制。与上面的示例一样，以下是值的分布方式

77: alpha (fully transparent: 00, fully opaque: FF) 
ff: Red
ff: Green
ff: Blue

This method will place a transparent background on your division, but if you want the entire div to be tranparent including everything inside, then you can use opacityproperty

此方法将在您的分区上放置透明背景，但如果您希望整个 div 透明，包括里面的所有内容，那么您可以使用opacity属性

For example

例如

div {
    background: #fff;
    opacity: 0.5; /* This is not support in IE though, use filter if needed in IE *
}

Demo

演示

回答by Hussein

Use the Gradient CSS properties to create a glossy effect.

使用渐变 CSS 属性创建光泽效果。

For Firefox use

供 Firefox 使用

background: -moz-linear-gradient(90deg, red, white, blue);

or

或者

background: -moz-linear-gradient(top,#000,#444 45%, #777 45%, #555);

you can add as many colors as you want to get the right look. https://developer.mozilla.org/en/CSS/-moz-linear-gradient

您可以添加任意数量的颜色以获得正确的外观。https://developer.mozilla.org/en/CSS/-moz-linear-gradient

For IE use the filter property

对于 IE，使用 filter 属性

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); 

Check working example at http://jsfiddle.net/gkyg3/1/

在http://jsfiddle.net/gkyg3/1/检查工作示例

For Transparency You need to use the RGBA background property on the container div. background: rgba(64, 64, 64, 0.5). 64, 64, 64 are the RGB color values. and 0.5 is the opacity value. Now parent can have it's own opacity value that will not be inherited by it's children. This is fully supported by FireFox, Opera, Chrome, Safari and IE9.

对于透明度您需要在容器 div 上使用 RGBA 背景属性。background: rgba(64, 64, 64, 0.5). 64、64、64 是 RGB 颜色值。0.5 是不透明度值。现在父级可以拥有它自己的不透明度值，该值不会被它的子级继承。FireFox、Opera、Chrome、Safari 和 IE9 完全支持这一点。

Check working example at http://jsfiddle.net/Rp5BN/

在http://jsfiddle.net/Rp5BN/检查工作示例

To support IE 5.5 to 8 we need to use vendor-specific CSS 'gradient filter:' So you need to add this.

为了支持 IE 5.5 到 8，我们需要使用供应商特定的 CSS 'gradient filter:' 所以你需要添加这个。

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);

Where 7f represents 127, i.e. 50% opacity and 404040 is the color.

其中 7f 代表 127，即 50% 不透明度，404040 是颜色。

Check working example in IE http://jsfiddle.net/Rp5BN/2/

检查 IE 中的工作示例http://jsfiddle.net/Rp5BN/2/

回答by sandeep

it's simple only you have do is to give

很简单，你要做的就是给予

background: rgba(256,256,256,0.5);

& for IE use this filter

& 对于 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;}

for more about color transparency in IE you have to read about hsla color: http://greenevillage.net/csspages/hsla.aspx

有关 IE 中颜色透明度的更多信息，您必须阅读 hsla 颜色：http://greenevillage.net/csspages/hsla.aspx

Edit

编辑

for glassy look you can use gradient like this http://jsfiddle.net/sandeep/hfTdw/5/

对于玻璃外观，您可以使用这样的渐变http://jsfiddle.net/sandeep/hfTdw/5/

回答by Richard Neil Ilagan

For a "glassy" effect, I imagine that getting the transparency is only the first step. Personally, "glassy" will also need diagonal background artifacts (the shine and sheen of glass?) which I think will need some sort of CSS (+ making sure it doesn't buckle when resized or something).

对于“玻璃状”效果，我想获得透明度只是第一步。就个人而言，“玻璃状”还需要对角背景人工制品（玻璃的光泽和光泽？），我认为这需要某种 CSS（+ 确保在调整大小时不会弯曲或其他东西）。

Similarly, for "iced", I personally think you'll need a frost-like distinction, which is normally a disparate and randomly-placed/repeated image artifact.

同样，对于“冰”，我个人认为你需要一个类似霜冻的区别，这通常是一个不同的、随机放置/重复的图像伪影。

回答by Nazmul

You can find a demo here

你可以在这里找到演示

If your Browser does not support CSS3 features, you can try this. I used two DIV, one for content and another for glass effect. I made both of their position absolute. In addition to that z-index has been used to display div one above another.

如果您的浏览器不支持 CSS3 功能，您可以试试这个。我使用了两个 DIV，一个用于内容，另一个用于玻璃效果。我把他们的位置都绝对化了。除此之外，z-index 已被用于将 div 显示在另一个之上。

Copy the code and try it in your browser.

复制代码并在浏览器中尝试。

<!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>

回答by ildarmgt

I was curious if I could do this and haven't found a good example so I'll update this for 2020.

我很好奇我是否可以做到这一点并且还没有找到一个很好的例子，所以我会在 2020 年更新这个。

screenshot

截屏

I did it in few ways:

我通过几种方式做到了：

diagonal transparent-opaque alternating gradient for reflection

用于反射的对角透明-不透明交替渐变

backdrop-filter: blur(- not for all browsers, not firefox default in 2020

backdrop-filter: blur(- 不适用于所有浏览器，也不是 2020 年默认的 Firefox

or javascript clone and filter: blur(effect

或 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>

https://jsfiddle.net/8hkawmvo/6/

https://jsfiddle.net/8hkawmvo/6/