1

我有这样的 HTML：

<div class="box">
<img src="http://2.bp.blogspot.com/-nIyLxGN6a0M/UmJOO_AcS_I/AAAAAAAAAGU/XBab6NjyaiI/s1600/anh4.jpg" />
</div>

使用上面的 HTML 代码，我想要这样的结果。

在此处输入图像描述

这意味着，从图像的中心到边界，不透明度会更小。我想通过颜色控制不透明度，所以我没有添加div叠加图像来获得这种效果。

我使用 css 之类的：

.box { //css here.
}

谢谢你的帮助。

4

3 回答 3

2

Fiddle

.box {
    position: relative;
    width: 95%;
    margin: 50px auto;
}
.box > img, .box > div {
    max-width: 100%;
}
.vignette {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(33%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 1) 100%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 1) 100%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 1) 100%);
    /* W3C */
}
于 2013-10-19T20:29:28.527 回答
0

看看这里

看看这个:)

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

只需使用 0.5 值并将类名更改为您的需要..

编辑：

好的，我会为你做的：

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="transparent_class"></div>
<div class="inner_circle"></div>
</body>
</html>

CSS

.transparent_class {
position:absolute;
top:0px;
left: 0px;
width:200px;
height:120px;
background-image: url("http://2.bp.blogspot.com/-nIyLxGN6a0M/UmJOO_AcS_I/AAAAAAAAAGU/XBab6NjyaiI/s1600/anh4.jpg");
background-size: 200px 120px;
overflow:hidden;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}

.inner_circle {
position:absolute;
top:0x;
left:50px;
width: 100px;
height: 100px;
background-image: url("http://2.bp.blogspot.com/-nIyLxGN6a0M/UmJOO_AcS_I/AAAAAAAAAGU/XBab6NjyaiI/s1600/anh4.jpg");
background-size: 200px 120px;
background-position: -50px -10px;
-moz-border-radius: 50px / 50px;
-webkit-border-radius: 50px / 50px;
border-radius: 50px / 50px;
}

JsBin

这里的图片

在此处输入图像描述

剩下的就看你自己了.. :)

于 2013-10-19T19:34:28.223 回答
0

一种解决方案是创建一个具有较大边界半径值的 div。这样，它会给你的 div 一个椭圆的形状。

在这个特定的 div 上，您可以像这样设置不透明度和 alpha 值：

div{
  width:400px;
  height:300px;
  border-radius:200px
  background-color:green;
  border:1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60);
}
于 2013-10-19T20:09:41.367 回答