Добавьте круговую затухающую непрозрачность (эффект виньетки) к изображениям в CSS

Я хочу дать круговой непрозрачность к изображению с помощью CSS.

Я знаю, что могу достичь непрозрачности на таких изображениях:

.circle img {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

Я знаю, что могу достичь круговых изображений, таких как:

.circle {
    border-radius: 50%;
    display: inline-block;
}
.circle img {
    border-radius: 50%;
    display: block;
}

Я хочу как-то объединить две вещи выше и применить непрозрачность только для краев изображения, поэтому центр изображения почти ничего не получает от тега непрозрачности. Я искал несколько часов, но ничего не нашел.

без непрозрачность: http://jsfiddle.net/8w6szf84/47

с непрозрачностью:http://jsfiddle.net/8w6szf84/48/ - > плохая непрозрачность, хотите, чтобы только края исчезали...

мне нужно использовать Javascript для этого? Есть предложения?

30
css css3 html opacity

6 ответов

хорошо, так что мы можем создать :after элемент, который будет равен размеру родителя. Используя это, мы можем установить градиент фона, который заставит его появиться, поскольку изображение исчезает в твердый цвет фона.

Примечание: в этом примере я сделал элемент градиента немного больше и переместил его на 1px чтобы остановить границу от появления вокруг него. Здесь вы можете возиться, чтобы получить идеальный эффект, который вы хотите. 

.circle {
    border-radius: 50%;
    display: inline-block;
    position: relative;
}
.circle img {
    border-radius: 50%;
    display: block;
    border:1px solid #fff;
}
.circle:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,1) 100%);
    border-radius: 50%;
    position: absolute;
    top: 0; left: 0;
}
<div class="circle">
    <img src="http://placeimg.com/200/200/any" />
</div>

Edit: вот еще одна версия без установки высоты или ширины и избавления от границы, которая возникает при использовании 100% родитель. As Vucko указал, что нам не нужны отрицательные значения для позиции, но может использовать border вокруг .

JsFiddle Здесь

34

вы также можете использовать box-shadow

.shadow {
  border-radius: 50%;
  display: inline-block;
  position: relative;
}
.shadow img {
  border-radius: 50%;
  display: block;
  border: 1px solid #fff;
}
.shadow:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: inset 10px 24px 40px 0px white, 
    inset -10px -24px 40px 0px white, 
    inset 20px -10px 40px 0px white, 
    inset -20px 10px 40px 0px white;
}
<div class="shadow">
  <img src="http://placeimg.com/200/200/any" />
</div>
7

Вы можете использовать два (одинаковых) изображения и иметь верхний меньший и прозрачный.

.circle-opaque {
    border-radius: 50%;          /* Make it a circle */
    display: inline-block;       
    position: absolute;          /* Able to position it, overlaying the other image */
    left:0px;                    /* Customise the position, but make sure it */
    top:0px;                     /* is the same as .circle-transparent */
    z-index: -1;                 /* Makes the image sit *behind* .circle-transparent */
}
.circle-opaque img {
    border-radius: 50%;          /* Make it a circle */
    z-index: -1;
}
.circle-transparent {
    border-radius: 50%;          /* Make it a circle */
    display: inline-block;       
    position: absolute;          /* Able to position it, overlaying the other image */
    left: 0px;                   /* Customise the position, but make sure it */
    top: 0px;                    /* is the same as .circle-transparent */
    z-index: 1;                  /* Makes the image sit *on top of* .circle-transparent */
}
.circle-transparent img {
    width: 200px;
    opacity: 0.4;                /* Make the second image transparent */
    filter: alpha(opacity=40);   /* For IE8 and earlier; optional */
    z-index: 1;                  /* And on top of the first */
}
<div class="circle-opaque">
    <img src="http://www.catchannel.com/images/articles/0805/orange-kitten-200px.jpg" />
</div>
<div class="circle-transparent">
    <img src="http://www.catchannel.com/images/articles/0805/orange-kitten-200px.jpg" />
</div>

http://jsfiddle.net/joe_young/20y832r7/

6

вот модифицированная версия Руди ответ, за исключением того, что диаметр градиента соответствует ширине (или высоте) изображения вместо диагонали. Радиус границы не требуется. 80% изображения отображается как есть, остальные 20% выцветают от прозрачного до белого.

.circle {
  display: inline-block;
  position: relative;
}
.circle img {
  display: block;
}
.circle:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle closest-side at center,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0) 80%, 
    rgba(255, 255, 255, 1) 100%
  );
}
<div class="circle">
  <img src="http://www.catchannel.com/images/articles/0805/orange-kitten-200px.jpg">
</div>

обратите внимание, что радиальные градиенты рисуются из указанного центра; в то время как тени тянутся от краев, поэтому и производят различные результаты.

2

хотя этот подход не так чист, как другие (возможно, из-за нехватки времени), я верю в это может быть очищены. Тем не менее, он использует только тени коробки для достижения внешнего вида, о котором вы думаете. (Радиальные градиенты, возможно, предпочтительнее, хотя, если вам нужен резерв, это может быть вариант)

div {
  height: 300px;
  width: 300px;
  background: url(http://placekitten.com/g/300/400);
  border-radius: 50%;
  box-shadow: 
    inset -5px -5px 100px white, 
    inset 0 0 90px white, 
    inset 0 0 80px white, 
    inset 0 0 70px white, 
    inset 0 0 60px white, 
    inset 0 0 50px white, 
    inset 0 0 40px white, 
    inset 0 0 30px white, 
    inset 0 0 20px white, 
    inset 0 0 10px red; 
}
<div></div>
1

мне нравится простой, поэтому может быть достаточно следующего:

.circle {
  background-image: radial-gradient(ellipse at center center, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
  display: inline-block;
}
.circle img {
  border-radius: 50%;
  mix-blend-mode: lighten;
}
<div class="circle">
  <img src="http://www.catchannel.com/images/articles/0805/orange-kitten-200px.jpg" />
</div>
0