•  22-07-2019
  •  | 
  •  

题

我想渗入容器div.imgborder图像和我想是半透明的出血（如一个不透明的玻璃效果）。有没有办法通过CSS或可能设置图像背景的div.imgborder一些不透明度为实现这一目标？ 

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN'
        'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title></title>

<meta name='keyword' content=''>
<meta name='description' content=''>

<link rel='stylesheet' href='reset.css'>

<style type='text/css'>
    body {
      background-color: #ccc;   
    }

    div#container {
      width: 960px;
      margin-left: auto; 
      margin-right: auto;
      margin-top: 50px;
    }

    img#myimg {
      overflow: visible;
    }

    div.imgborder {
      background-color: #222;
      opacity: 0.9;
      width: 160px;
      height: 160px;
      padding: 10px;
    }


</style>

</head>
<body>
    <div id='container'>

        <div class='imgborder' align='center'>
            <img src='bar.jpg' alt='' width='160' height='160' id='myimg' />
        </div>

    </div>
</body>
</html>
有帮助吗？

解决方案

您可以创建你喜欢的半透明效果的PNG文件，并添加为背景。任何现代的浏览器将在正确呈现，创造你想要的效果。

其他提示

壁虎和WebKit支持设置RGBA（）作为一个边框颜色属性，因此你可能设置：

border-color: rgba(255,255,255,0.42);

..和具有边界是半透明的。

要完成出血，不过，你可能需要覆盖在图像上透明的股利，并给它的宽度和高度等于宽度和高度的图像减去边框的宽度。因此，如果图像是200x200的，你想2px的边框，你可能不得不做出股利196x196，因为盒模型决定了边框宽度被添加到宽/高尺寸。

这是JS和CSS解决方案，但值得一提的

的GlassBox-JS

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top