在图像上应用渐变

时间:2014-08-18 15:05:56

标签: css image gradient

这是JsFiddle

我有一个转换后的图像,我想在其上添加渐变(黑色到透明)。

HTML:

<div class="contentwrap">
  <div class="perspectiveDiv">
      <img src="http://image.noelshack.com/fichiers/2014/34/1408372755-black-card.png"  class="img" />
  </div>
</div>

CSS:

.contentwrap {
    margin: 0 auto;
    max-width: 600px;
    height: 100%;
    display: table;
    padding-top: 150px;
}

.perspectiveDiv{
    perspective:750px; 
    position: relative; 
    left: 0; 
    top: 0;    
}

.img{
    position: absolute; 
    top: -152px;  
    left: 25px;
    transform:  rotateX(60deg); 
    max-width: 250px;  
    -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);;
    -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.8);;
    box-shadow: 0 60px 45px -20px rgba(0, 0, 0, 0.8);;
    -moz-border-radius: 15px;
    border-radius: 16px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1),  rgba(0, 0, 0, 0));
}

这是我需要的结果(用photoshop制作):

enter image description here

我找到了如何在背景图像上应用渐变,但不是标准图像......

有可能做我需要的吗?

你能帮帮我吗?它可能非常简单,但我是初学者,我没有设法做到这一点......

0 个答案:

没有答案