gpt4 book ai didi

css - 图像内部的 alpha 边框

转载 作者:行者123 更新时间:2023-12-04 13:46:03 26 4
gpt4 key购买 nike

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

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

另一方面。如果我不设置“溢出”,那么边框将不会出现。

我想要这样的东西:

alt text

最佳答案

在 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-divs,因为这样图像大小是可变的,如果您的图像始终具有相同的大小,您可以只使用一个。

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

关于css - 图像内部的 alpha 边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3850976/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com