如何创建的图像

问题描述：

我想创建了我的一半图像渐变效果的一半渐变效果，我发现这里面了我的形象给出了一个完整的渐变叠加效果如何创建的图像

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

，但我想知道如何才能将这个效果应用到我的图像的一半，我在网上搜索，但没有看到我正在寻找什么，所以我决定发布。

通过我的形象的一半我的意思不是垂直水平

我们有任何人谁拥有渐变中

你可能需要两种不同的元素，其中之一可以是一个伪元素（之前或之后）。 – Itay

hw我去abt它pls –

你的例子不使用渐变，只有一个半透明的背景颜色。您询问的内容非常不清楚 - 请考虑编辑您的问题以便更清楚。 – Emil

答

多重背景和合适的颜色停止的想法。

.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; 
 
}

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

答

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

答

这里是一个工作一个例子。

应包含图像

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

你的哪个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%; 
    } 
}

相关推荐