颜色适应背景与时尚的效果

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);

Answer 2

您可以通过更改背景颜色值来自定义选项

＆＃13;

＆＃13;

body{
background:#0E0E0E;
}
.div1{
overflow:hidden;
width:400px;
height:100px;
margin:40px auto;
position: relative;
}
.div2{
background: #1c1117;
background: -moz-linear-gradient(45deg, #1c1117 0%, #401e2f 4%, #5c2a43 16%, #5a3a49 30%, #5f5d44 47%, #5f5d44 47%, #5f5d44 57%, #5a3a49 75%, #5c2a43 85%, #401e2f 96%, #1c1117 100%);
background: -webkit-linear-gradient(45deg, #1c1117 0%,#401e2f 4%,#5c2a43 16%,#5a3a49 30%,#5f5d44 47%,#5f5d44 47%,#5f5d44 57%,#5a3a49 75%,#5c2a43 85%,#401e2f 96%,#1c1117 100%),;
background: linear-gradient(45deg, #1c1117 0%,#401e2f 4%,#5c2a43 16%,#5a3a49 30%,#5f5d44 47%,#5f5d44 47%,#5f5d44 57%,#5a3a49 75%,#5c2a43 85%,#401e2f 96%,#1c1117 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c1117', endColorstr='#1c1117',GradientType=1 );
width:100%;
height:100%;
-webkit-filter: blur(30px);
-moz-filter: blur(30px);
-o-filter: blur(30px);
-ms-filter: blur(30px);
filter: blur(30px);
}
.div3,.div4,.div5,.div6{
 position: absolute;
 z-index:1;
 text-align: center;
}
.div3{
background-image:url('http://a10.gaanacdn.com/images/albums/76/1979776/crop_175x175_1502455945_1979776.jpg');
background-size:cover;
 width:80px;
 height:80px;
 border-radius:5px;
 margin:10px 15px;
}
.div4{
background-color: #FE3E01;
    border-radius: 30px;
    width: 80px;
    height: 30px;
    bottom: 10px;
    left: 110px;
    color: #fff;
    font-size: 12px;
    cursor:pointer;
}
.div4:hover{
   background-color: #d63100;
}
.div4 span{
 font-size:20px;
  vertical-align:sub;
}
.div5{
    top: 10px;
    left: 110px;
    color: #fff;
}
.div5 span:first-child{
 font-size:16px;
}
.div5 span:last-child{
 font-size:10px;
  vertical-align:top;
}
.div6{
    top: 0px;
    right: 10px;
    color: #fff;
}
.div6 span:first-child{
 font-size:18px;
  vertical-align:sub;
}
.div6 span:last-child{
 font-size:20px;

}

＆＃13;

<div class="div1">
 <div class="div3"></div>
 <div class="div4"> 
 <span>&#9656;</span>Play All
 </div>
  <div class="div5">
 <span>Not So Bollywood</span><br>
 <span>Created by Ganna | Trackes 37</span>
  </div>
    <div class="div6">
 <span> &#9825; </span>
 <span> ... </span>
  </div>
<div class="div2">

<div>

<div>

＆＃13;

＆＃13;

＆＃13;