Как реализовать полупрозрачную рамку?

Question

[Евгений]

Как реализовать полупрозрачную рамку поверх изображения с внутренними закругленными краями?

Answer 1

[Александр]

Задавайте цвет в формате rgba.
Например:
border: 10px solid rgba(0,0,0,.2);

Comments

[Евгений]

Эта рамка вокруг картинки. Как сделать внутри картинки?

[Александр]

Евгений Можж: тогда через box-shadow codepen.io/palehin/pen/qqVzYR

[Евгений]

Александр: тоже работает, но как скруглить внутренние углы? border-radius работает на внешние углы.

[Александр]

Евгений: codepen.io/palehin/pen/qqVzYR вот так

[Евгений]

Александр: Спасибо большое!

Answer 2

[Vladimir T]

За основу можите взять codepen.io/estset123/pen/mOqNRQ

Comments

[Евгений]

Спасибо.

Answer 3

[Антон Сашнин]

Для прозрачности используется свойство opacity в css (https://webref.ru/css/opacity)

Например,

<style>
.mydiv {
  opacity: 0.5;
  background-image: url('background.png');
  width: 300px;
  height: 300px;
}
</style>

<div class="mydiv">
</div>

Comments

[Евгений]

А как выделить определенную фигура(на примере рамки)?

[Антон Сашнин]

Евгений Можж: это 2 div'а, нижний с прозрачностью и z-index: 1, у верхнего z-index: 2.