时间戳

首页 > 解决方案 > img 标签中的渐变属性

html - img 标签中的渐变属性

问题描述

我正在尝试渐变我的图像，但它从未显示

.asdf img  {
 background: rgb(2,0,36);
background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
            }
<div class="asdf text-center tx-white">

  <img style="height: 200px;" class="w-100 shadow-sm bd" src="{{url($xd->banner)}}"alt="">

</div>

在图像上显示渐变的正确方法是什么？

标签： htmlcssbootstrap-4

解决方案

您可以将其作为背景图像，而不是作为 img。

.asdf img {
object-fit: cover;
}

.asdf .img { background-image:
    linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
	url('https://cdn.the-scientist.com/assets/articleNo/66864/aImg/35078/foresttb-l.jpg');
	width: 80%;
    height: 500px;
    background-size: cover;
}
<div class="asdf text-center tx-white">

    <div class="w-100 shadow-sm bd img" ></div>
  
  </div>

使用 img 标签更新的线性渐变：

img {
	max-width: 100%;
  }
  
  .hero-image {
	max-width: 100%; 
	width: 800px;
	margin: auto;
  }
  
  .hero-image::after {
	display: block;
	position: relative;
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%);
	margin-top: -150px;
	height: 150px;
	width: 100%;
	content: '';
  }
 <div class="hero-image">
    <img src='https://cdn.the-scientist.com/assets/articleNo/66864/aImg/35078/foresttb-l.jpg' />
  </div>

推荐阅读