Question

我试图在我的图像的一半上创建渐变效果，我发现这会在我的图像上产生完整的渐变叠加效果

.tinted-image {
  background: 
    /* top, transparent red */ 
    rgba(255, 0, 0, 0.25),
    /* bottom, image */
    url(image.jpg);
}

但是我想知道我怎么只能将这个效果应用到我的图像的一半，我在网上搜索但是没有看到我想要的，所以我决定发布。

我的图像的一半是指垂直不水平

我们有人知道这个

Answer 1

渐变中有多个背景和合适的色彩停止。

＆＃13;

.tinted-image {
  width: 460px;
  height: 300px;
  border: 1px solid grey;
  background-image: linear-gradient(to bottom, rgba(0, 255, 0, 0.5), rgba(0, 255, 0, 0) 50%, transparent 50%), url(http://www.fillmurray.com/460/300);
  margin: auto;
}

＆＃13;

<div class="tinted-image"></div>

＆＃13;

Answer 2

HTML

<img class="tinted-image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"/>

CSS

.tinted-image {
  width: 150px;
  background: linear-gradient(to bottom,rgba(255,0,0,0.5),rgba(255,0,0,0), transparent)  
}

作为来源的图像我会这样做，只是为了信息。

修改：demo

Answer 3

这是一个工作的例子。

哪个应该是包含图像的div

<div class="tinted-image"></div>

你的CSS

html, body {
  width: 100%;
  height: 100%;
}

.tinted-image {
  width: 100%;
  height: 100%;
  background: url('http://images.kuoni.co.uk/73/johannesburg-and-pretoria-38330408-1438098667-WideInspirationalPhoto.jpg') center center no-repeat;
  background-size: cover;

  &:before {
    content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(to left bottom,#002f4b,#dc4225);
        opacity: .5; 
      height:100%;
      width:50%;
  }
}

如何在图像的一半上创建渐变效果

3 个答案: