我试图让一个 div 有一个 500px 宽的蓝色背景图像。然后我试图让渐变在 div 的最左边变成白色,当它向右移动时,背景图像慢慢可见
问问题
383 次
2 回答
1
这个css代码将有助于使其渐变
.gradient {
width: 200px;
height: 200px;
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
}
使用类在html中使用上面的css
<div class="gradient">
gradient box
</div>
于 2013-09-04T11:02:56.350 回答
0
我实际上只是在另一个问题上发布了类似的内容,但它也适用于这种情况。这是在行动:
http://sassmeister.com/gist/3528cb23d3e831231949
而实现这个效果的CSS:
.hero {
width: 100%;
height: 500px;
background: url("http://placesheen.com/1200/500") center center no-repeat;
background-size: cover;
}
.hero:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 508px;
background-image: linear-gradient(rgba(255, 255, 255, 0.2), white);
}
当然,请务必添加正确的供应商前缀,以便跨浏览器兼容。如果你想改变梯度方向,你会改变梯度值。
的HTML:
<div class="hero">
You could put content here if you want
</div>
于 2015-04-01T02:44:02.307 回答