Question

我有这样的HTML：

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

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

enter image description here

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

我使用css：

.box { //css here.
}

感谢您的帮助。

Answer 1

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 */
}

Answer 2

只需看看here

并看到这个:)）

.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

这里的图片

enter image description here

剩下的由你知道.. :)）

Answer 3

一种解决方案是创建一个具有较大border-radius值的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);
}

我怎么能不透明的图像中心？

3 个答案: