颜色调整背景与时尚的效果

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

您可以通过更改背景颜色值

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; 
 

 
}

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

Answer 2

似乎你现在想要做出背景效果？它看起来像是一个背景图像，模糊不清，只有基本的形式和颜色才能通过。尝试将下面的内容与普通背景图像结合使用。

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