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

时间：2011-04-01 05:28:13

标签： javascript jquery css

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

div的bgcolor是lightskyblue，尚未设置背景图像。

enter image description here

6 个答案:

答案 0 :(得分：7)

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

例如

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

在IE中然而，rgba不起作用。你需要使用过滤器。

例如

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

Demo

答案 1 :(得分：4)

使用渐变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: 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'渐变过滤器：'所以你需要添加它。

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

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

检查IE http://jsfiddle.net/Rp5BN/2/

中的工作示例

答案 2 :(得分：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/

之类的渐变

答案 3 :(得分：1)

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

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

答案 4 :(得分：1)

您可以找到演示here

如果您的浏览器不支持CSS3功能，您可以试试这个。我使用了两个DIV，一个用于内容，另一个用于玻璃效果。 我让他们的位置绝对。除此之外，z-index还用于将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>

答案 5 :(得分：0)

我很好奇我是否能够做到这一点，但还没有找到一个好的例子，所以我将在2020年进行更新。

screenshot

我通过几种方式做到这一点：

透明的不透明对角线渐变反射

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>

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

相关问题
最新问题