是否可以在css背景图像上使用渐变?

时间:2013-09-04 10:53:08

标签: css3 gradient linear-gradients

我想让一个div有一个500px宽的蓝色背景图像。然后,我试图让div的最左边的渐变变为白色,并且当它向右移动时,背景图像会慢慢可见

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分: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>

有关渐变的更多信息: http://www.w3schools.com/css/css3_gradients.asp