Question

我希望图像渗入容器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>

Answer 1

Gecko和WebKit支持将rgba（）设置为border-color属性，因此您可以设置：

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

..并且边框是半透明的。

然而，要完成渗色，您可能需要在图像上叠加透明div，并使其宽度和高度等于图像的宽度和高度减去边框的宽度。因此，如果图像为200x200，并且您需要2px边框，则可能必须使div为196x196，因为框模型指示边框宽度已添加到宽度/高度尺寸。

Answer 2

您可以使用您喜欢的半透明效果创建PNG文件，并将其添加为背景。任何现代浏览器都可以正确渲染并创建您想要的效果。

Answer 3

这是js＆amp; css解决方案，但值得一提

GlassBox-JS

半透明图像边框

3 个答案: