到目前为止,我看到的所有使图像变暗的解决方案都适用于没有圆角的图像。这是有问题的,因为我见过的所有解决方案都需要使用背景颜色。当角落变圆时,背景颜色会显示出来。我说的是这些解决方案:
http://jsbin.com/icemiy/1/edit
是否还有其他方法仍然纯粹通过 css 或 javascript(当然包括 jQuery)。提前致谢!
到目前为止,我看到的所有使图像变暗的解决方案都适用于没有圆角的图像。这是有问题的,因为我见过的所有解决方案都需要使用背景颜色。当角落变圆时,背景颜色会显示出来。我说的是这些解决方案:
http://jsbin.com/icemiy/1/edit
是否还有其他方法仍然纯粹通过 css 或 javascript(当然包括 jQuery)。提前致谢!
完全可以使用 css。
圆形覆盖和图像:
#overlay, img{
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
}
哦,如果你不关心 ie,你可以使用过渡来获得额外的好处:http: //jsfiddle.net/fYEWr/
您可以background-clip
在图像及其容器上使用 - DEMO
figure {
border-radius: 10px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
img {
float: left;
background: black;
display: block;
-moz-transition: opacity .3s linear;
-webkit-transition: opacity .3s linear;
-ms-transition: opacity .3s linear;
-o-transition: opacity .3s linear;
transition: opacity .3s linear;
border-radius: 10px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
我使用本教程解决了我的问题http://mattbango.com/notebook/web-development/hover-zoom-effect-with-jquery-and-css/
希望尝试做同样事情的人会找到此页面,并且这几种解决方案中的一种对他们有用!
谢谢大家!
您可以将此代码放入 img、img hover 和 tint 以具有圆角
-webkit-border-radius:10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
将边框半径添加到您为其提供背景颜色的容器。
在您的 jsBin 示例中,请执行以下操作:
.tint {
overflow: hidden;
float: left;
background: blue;
margin: 0 20px 20px 0;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
}