Как установить непрозрачность или уменьшить яркость фонового изображения div с помощью CSS ⇐ CSS

[Anonymous]

В следующем примере отображается только цвет фона, но изображение не отображается. Непрозрачность также, похоже, не работает.

Код: Выделить всё

.my-container {
position: relative;
background-color: blue;
min-height: 100px;

}
.my-container:before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.1;
background-image: url("https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg");
background-position: 100% center;
background-repeat: no-repeat;

-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}

Код: Выделить всё

Contents

Подробнее здесь: https://stackoverflow.com/questions/599 ... -using-css