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

我有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. 
}

感谢您的帮助。

来源

2013-10-19 Minh Anh

这对你的工作？ http://jsfiddle.net/koala_dev/Tsj5X/ –

@koala_dev：谢谢。这对我来说是另一种解决方案。 –

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-19 20:29:28

Bram：谢谢。这是我真正想要的。谢谢你。 –

只是来看看here

看这:)

只是玩的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

这里的PIC

enter image description here

剩下的就是你知道.. :)

来源

2013-10-19 19:34:28

我不认为在这里设置不透明度是问题，但是会使椭圆形效果 –

@亚历磁带：你真的明白我想要什么吗？感谢您的回答。 –

@koala_dev：不需要椭圆形状，任何不透明度，但图像的面积中心需要设置为不透明度= 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-19 20:09:41

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

回答

相关问题