html - 具有时尚效果的颜色适应背景

Question

我正在做一个我必须实现这个的元素 what i want to achieve

这是我做的

.album-details-wrapper {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, black 0%,white 100%), url('http://a10.gaanacdn.com/images/albums/76/1979776/crop_175x175_1502455945_1979776.jpg');
  background-blend-mode: overlay;
  background-size: 300px 300px !important;
  background-repeat: repeat-x;
  background-size: cover;
  min-height: 300px;

}
.album-details-wrapper:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: -webkit-linear-gradient(left, #2F2727, rgba(1,2,3,0.9)5%, #2F2727, rgba(1,2,3,0.9) , #2F2727);

opacity: 1;
}

结果变成 result

Answer 1

看起来像你现在正在尝试制作的背景效果？它看起来像一个非常模糊的背景图像，因此只有基本的形式和颜色可以通过。尝试将以下内容与普通背景图片结合使用。

-webkit-filter: blur(35px);
-moz-filter: blur(35px);
-o-filter: blur(35px);
-ms-filter: blur(35px);
filter: blur(35px);