渐变彩色图像

-3

我知道有这个解决方案做出编入格拉提安彩色图像：渐变彩色图像

background: -webkit-linear-gradient(left, #f5f7f8 50%, #fff), url("image.jpg");

然而，是什么样，如果我的形象被称为像<img src="image.jpg">一个HTML标签？

感谢

来源

2017-08-14 GrandGTO

你试过了什么？ –

[Stack Overflow]（https://stackoverflow.com/）不是免费的代码写入服务。您应该尝试自己编写代码。如果你遇到问题，在做了更多的研究之后，你可以发布你已经试过的东西，并明确说明什么是不工作的，并提供[Minimal，Complete，and Verifiable]（http://stackoverflow.com/help/mcve）例。我建议你阅读[如何提出一个好问题]（http://stackoverflow.com/help/how-to-ask）。 – codesayan

[如何在同一元素上组合背景图像和CSS3渐变？]（https://stackoverflow.com/questions/2504071/how-do-i-combine-a-background-image-和-css3-gradient-on-the-the-same-element）（我知道并不是完全相同的问题，但由于问题已经写好，所以这个答案可以作为重复） – gmo

不是使覆盖在这样

.pickgradient { 
 
    display:inline-block; 
 
    background: -webkit-linear-gradient(left, transparent 95%, #fff) 
 
} 
 

 
img{ 
 
    position:relative; 
 
    z-index:-1; 
 
    display:block; 
 
    height:200px; width:auto; 
 
}

<div class="pickgradient"> 
 
    <img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" /> 
 
</div>

的IMG

来源

2017-08-14 09:32:21

谢谢。对于我的问题，如果我错过了一些说明或代码，很抱歉... – GrandGTO

欢迎您，祝您的工作顺利。 –

这是怎么看起来像白色渐变的5％......

.main-header { 
 
padding-top:200px; 
 
height:200px; 
 
background: -webkit-linear-gradient(left, transparent 95%, #fff), url("https://www.w3schools.com/css/trolltunga.jpg") no-repeat center; 
 
background-size: cover; 
 
}

<div class="main-header"><div>

来源

2017-08-14 09:06:41

谢谢，但它只适用于CSS背景图片。我的图片必须位于标记中，而不是在CSS表格中。 – GrandGTO

我的问题已经更新 – GrandGTO

渐变彩色图像

回答

相关问题