半透明图像边框

Question

I'd like the image to bleed into the container div.imgborder and i'd like the bleeding to be semitransparent (like an opaque glass effect). 我希望图像渗入容器div.imgborder中，并且希望渗色是半透明的（例如不透明的玻璃效果）。 Is there a way to achieve this via CSS or maybe setting an image background with some opacity on the 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 and WebKit support setting rgba() as a border-color property, so you could potentially set: Gecko和WebKit支持将rgba（）设置为border-color属性，因此您可以设置：

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

..and have a border that is semi-transparent. ..并具有半透明的边框。

To accomplish the bleeding, however, you'll probably need to overlay a transparent div on the image and give it a width and height equal to the width and height of the image minus the width of the border. 但是，要完成渗色，您可能需要在图像上覆盖一个透明的div，并将其宽度和高度设置为等于图像的宽度和高度减去边框的宽度。 So if the image is 200x200, and you want a 2px border, you'll probably have to make the div 196x196 since the box model dictates that the border width is added to the width/height dimensions. 因此，如果图像为200x200，并且您想要2px边框，则由于框模型要求将边框宽度添加到宽度/高度尺寸中，因此您可能必须将div设为196x196。

Answer 2

You can create a PNG file with the semi-transparent effect you like and add this as background. 您可以创建具有所需的半透明效果的PNG文件，并将其添加为背景。 Any modern browser will this render correctly and create the effect you want. 任何现代浏览器都可以正确渲染并创建所需的效果。

Answer 3

this was js & css solution, but worth mentioning 这是js＆css解决方案，但值得一提

GlassBox-JS 的GlassBox-JS

半透明图像边框

问题描述

3 个解决方案

解决方案1
2 2009-03-13 10:55:59

解决方案2
1 已采纳 2009-03-13 10:50:32

解决方案3
1 2009-03-13 11:00:56

半透明图像边框

问题描述

3 个解决方案

解决方案1 2 2009-03-13 10:55:59

解决方案2 1 已采纳 2009-03-13 10:50:32

解决方案3 1 2009-03-13 11:00:56

解决方案1
2 2009-03-13 10:55:59

解决方案2
1 已采纳 2009-03-13 10:50:32

解决方案3
1 2009-03-13 11:00:56