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

1 つの解決策は、border-radius の値が大きい div を作成することです。このようにして、divに楕円形を与えます。

この特定の div では、次のように不透明度とアルファ値を設定できます。

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 に答える
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 に答える