Как я могу непрозрачность центра изображения?

Question

Как я могу непрозрачность центра изображения?

0

У меня такой 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.
}

Спасибо за вашу помощь.

Minh Anh 19 окт. 2013, в 21:59

Источник

1

Будет ли это работать для вас? jsfiddle.net/koala_dev/Tsj5X
koala_dev 19 окт. 2013, в 19:46
0

@koala_dev: спасибо. это еще одно решение для меня.
Hai Tien 20 окт. 2013, в 03:38

Теги:

html

css

3 ответа

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

здесь pic

остальное тебе известно.. :)

Alex Tape 19 окт. 2013, в 18:21

0

Я не думаю, что настройка непрозрачности является проблемой здесь, но создание эффекта овальной формы
koala_dev 19 окт. 2013, в 19:36
0

@Alex Tape: Ты действительно понимаешь, чего я хочу? Спасибо за Ваш ответ.
Hai Tien 19 окт. 2013, в 19:38
0

@koala_dev: овальная форма не нужна, непрозрачность, но центр области изображения нужно установить с непрозрачностью = 0, а значение непрозрачности будет увеличиваться до границы изображения. У кого-нибудь есть идеи?
Hai Tien 19 окт. 2013, в 19:43
0

@happi я понял твой вопрос .. отредактировал мой пост сейчас, чтобы применить более подробно ..
Alex Tape 19 окт. 2013, в 20:14
0

@AlexTape. Спасибо за вашу попытку помочь мне. Я высоко ценю ваш характер.
Hai Tien 20 окт. 2013, в 03:29
0

лол .. ты искал простой градиент;) я должен прочитать вопрос более посвященный: P
Alex Tape 21 окт. 2013, в 19:11

Показать ещё 4 комментария

0

Одним из решений является создание 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);
}

Ritesh A 19 окт. 2013, в 18:14

Ещё вопросы

Будет ли это работать для вас? jsfiddle.net/koala_dev/Tsj5X
@koala_dev: спасибо. это еще одно решение для меня.
Я не думаю, что настройка непрозрачности является проблемой здесь, но создание эффекта овальной формы
@Alex Tape: Ты действительно понимаешь, чего я хочу? Спасибо за Ваш ответ.
@koala_dev: овальная форма не нужна, непрозрачность, но центр области изображения нужно установить с непрозрачностью = 0, а значение непрозрачности будет увеличиваться до границы изображения. У кого-нибудь есть идеи?
@happi я понял твой вопрос .. отредактировал мой пост сейчас, чтобы применить более подробно ..
@AlexTape. Спасибо за вашу попытку помочь мне. Я высоко ценю ваш характер.
лол .. ты искал простой градиент;) я должен прочитать вопрос более посвященный: P

Bram Vanroy · Accepted Answer · 2013-10-19T19-08-00.000Z

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

Брэм: Спасибо. Это действительно то, что я хочу. Спасибо вам большое ..