Question

我正在尝试在图像内部而不是在图像外部创建边框。我想这样做是因为我想在边框上加上一些alpha值，以便我可以通过边框看到图像。

我尝试将div放置在比图像周围的图像小几个像素的位置，然后设置“overflow：none”。边框现在位于图像中，但是当我将alpha应用于边框时，无法通过边框看到任何内容，因为溢出设置为无。

另一方面。如果我没有设置“溢出”，则边框将不会显示。

我想要这样的事情：

alt text

Answer 1

您可以使用带有负边距的包装和rgba（255,255,255，.5）作为边框颜色。

Answer 2

在firefox和ie8中测试过（在ie8中没有不透明度，但你可以使用过滤器）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <title>test</title>
        <style type="text/css">
            .imgcontainer{padding:0; position: relative; 
                        display: inline-block; overflow: hidden;}
            .imgcontainer img{display:block;}
            .borders, .borders2{position: absolute; width:100%; height:100%;
                        border: 4px solid #000;}
            .borders{opacity: .5;}
            .borders2{bottom: 4px; right: 4px;}
        </style>
    </head>
    <body>
        <div class="imgcontainer">
            <div class="borders"><div class="borders2"></div></div>
            <img src="img" />
        </div>  
    </body>
    </html>

这会创建一个4px透明边框，但可以轻松更改。因为不透明度仅影响绝对定位的div，所以图像不会变得透明。在此示例中需要两个border-div，因为这样图像大小是可变的，如果您的图像总是具有相同的大小，则只能使用一个。

jsfiddle：http://jsfiddle.net/Xb37w/2/

图像内的alpha边框

2 个答案: