如何在Javascript/CSS中绘制“智能”边框？

我的意思是像this（看看孩子们踢足球瓷砖）。看看它如何增加任意图像的每个像素的亮度？我如何使用jQuery和/或CSS来做到这一点？如何在Javascript/CSS中绘制“智能”边框？

来源

2011-09-01 Jason

你能否澄清的问题？我没有看到任何增加的亮度。你想改变图像本身？这与网络有什么关系？不应该photoshop做这项工作？ –

如果你真的想找一个JavaScript解决方案（我怀疑这个），这可能会有所帮助：http://www.pixastic.com/ – m90

尝试使用此解决方案http://css-tricks.com/7423-transparent-borders-with-background-clip/，但它与IE不兼容，版本< 9。

来源

2011-09-01 07:10:19 WTK

您可以使用<canvas>元素获取/处理图像的像素，看看这里：https://developer.mozilla.org/en/html/canvas/pixel_manipulation_with_canvas

来源

2011-09-01 07:14:04 stewe

一种选择是一种伪造它具有非常小的插入箱子的影子：

box-shadow: inset 0px 0px 5px 0px #ffff66;

Click here for an example。

来源

2011-09-01 07:20:19 Kyle

+1; @Jason - 我不认为插入框阴影在IE浏览器工作<9 – WTK

看一看这个：jsFiddle。使用一个白色的透明边框和从与边框相同的位置开始的图像就可以实现。

来源

2011-09-01 07:23:06

其实我也在处理这种类型的属性，但你先给出答案:) – sandeep

将图像放在div的背景中，并设置一个嵌入的方块阴影。

#myDiv{ 
background: url(http://dummyimage.com/300/09f/fff.png) 0 0 no-repeat; 
-moz-box-shadow:inset 0 0 1px #fff; 
-webkit-box-shadow:inset 0 0 1px #fff; 
box-shadow:inset 0 0 1px #fff; 
}

随着最后一个像素参数，你可以控制的插图界

来源

2011-09-01 07:30:29 Chugworth

@jason的宽度;尝试此解决方案还其在IE8 &工作上面http://jsfiddle.net/sandeep/Ksr86/2/

CSS：

body{background:#000} 

#test { 
    background:url('http://cdn.natural-life.ca/mlb-wrap-ie6.jpg') no-repeat center center; 
    width: 350px; 
    height: 350px; 
    position:relative; 
} 
#test:after { 
    position:absolute; 
    background:rgba(0,0,0,0.5); 
    content:""; 
    display:block; 
    top:2px; 
    left:2px; 
    right:2px; 
    bottom:2px; 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 
}

来源

2011-09-01 09:12:17 sandeep

如何在Javascript/CSS中绘制“智能”边框？

回答

相关问题