0

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

3 回答 3

2

Gecko 和 WebKit 支持将 rgba() 设置为边框颜色属性，因此您可以设置：

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

..并且有一个半透明的边框。

然而，要完成出血，您可能需要在图像上覆盖一个透明 div，并为其设置一个宽度和高度，该宽度和高度等于图像的宽度和高度减去边框的宽度。因此，如果图像是 200x200，并且您想要一个 2px 的边框，您可能必须将 div 设置为 196x196，因为框模型规定边框宽度被添加到宽度/高度尺寸中。

于 2009-03-13T10:55:59.683 回答
1

您可以创建一个具有您喜欢的半透明效果的 PNG 文件并将其添加为背景。任何现代浏览器都会正确呈现并创建您想要的效果。

于 2009-03-13T10:50:32.303 回答
1

这是 js & css 解决方案，但值得一提

GlassBox-JS

于 2009-03-13T11:00:56.880 回答