不占用生成图像的整个高度的梯度答案

【问题标题】：Gradine that doesn't take entire height of generated image不占用生成图像的整个高度的梯度
【发布时间】：2015-01-26 13:17:02
【问题描述】：

我需要实现这个效果：（紫红色是透明的）

我想用这个我已经准备好的剪辑来实现它：

div {
  width: 300px;
  height: 100px;
  background-image: url(http://lorempixel.com/300/100);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: center;
  transition: background 2s ease;
}
div:hover {
  background-size: 100% 100%;
}

代码笔：http://codepen.io/FezVrasta/pen/ByZqvK

我需要生成如下图所示的 CSS 渐变：（紫红色是透明的）

我该怎么办？

【问题讨论】：

使用伪元素代替背景来创建栏。
@danko 这是我要避免的。
为什么？ codepen.io/anon/pen/vEZVbo
我必须将它应用到输入元素

标签： css gradient

【解决方案1】：

只需使用色标如下~：

div {
  border:1px solid red;
  width: 200px;
  height: 100px ;
  background-image: linear-gradient(to bottom, 
  transparent, 
  transparent 90%, 
  blue 90%, 
  blue)
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

你能用这样的东西吗？

.this {
  width: 300px;
  height: 100px;
  background: red;
  position: relative;
}
.this div {
  position: absolute;
  height: 10px;
  width: 0px;
  margin: 0 auto;
  background: blue;
  bottom: 0;
  left: 50%;
  transition: all 0.8s;
}
.this:hover div {
  width: 100%;
  left: 0;
}

<div class="this">
  <div></div>
</div>

如果您想使用渐变创建这种类型的设计，您可以使用this generator，它可以让您为背景定义“透明”部分

【讨论】：