在背景图像上使用css渐变

9 浏览
0 Comments

在背景图像上使用css渐变

我一直尝试在背景图片上使用线性渐变，以实现背景底部从黑色到透明的渐变效果，但似乎无法显示出来。

我阅读了其他案例和示例，但它们都对我无效。我只能看到渐变或图片，而不能同时显示两者。

这是我的CSS代码：

body {
  background: url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat, -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)));
}

这是链接。

只需点击第一个标志，忽略那个效果，我在之后的整个站点中尝试的效果。

0

3 答案

0 Comments

问题出现的原因是背景图片和渐变色的叠加导致渐变色无法显示。解决方法是将渐变色的代码放在背景图片的后面。

代码如下：

#multiple-background{
	box-sizing: border-box;
	width: 123px;
	height: 30px;
	font-size: 12pt;
	border-radius: 7px;		
	background: url("https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Full.png") no-repeat 5px center, linear-gradient(to bottom, #4ac425, #4ac425);
	background-size: 18px 18px, 100% 100%;
	color: white;	
	border: 1px solid #e4f6df;
	box-shadow: .25px .25px .5px .5px black;
	padding: 3px 10px 0px 5px;
	text-align: right;
	}

<div id="multiple-background"> Completed </div>

这样修改之后，渐变色就可以正常显示在背景图片的上方了。

0
0 Comments

问题出现的原因是需要在背景图像的URL后面添加线性渐变的代码。解决方法是将背景图像的URL放在线性渐变代码的末尾。以下是解决方法的代码示例：

.css {
  background: 
   linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%),
   url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  height: 200px;
}

在HTML中，可以使用以下代码将样式应用到一个元素上：

根据其他人的回答，这种方法可以成功地将渐变效果覆盖在背景图像上。但是，有些人可能遇到了只显示渐变效果或只显示背景图像的问题。希望这篇文章能够帮助到大家解决这个问题。

0
0 Comments

问题的原因是该代码中使用了-webkit-前缀的CSS属性，只能在Webkit浏览器中起作用，因此在其他浏览器上无法显示渐变效果。

解决方法是使用适用于不同浏览器的渐变属性。可以使用以下代码替换原来的代码：

body {
    margin: 0;
    padding: 0;
    background: url('img/background.jpg') repeat;
    background: -moz-linear-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);
    background: -ms-linear-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);
    background: -o-linear-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);
    background: -webkit-linear-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);
}

这样修改后，渐变效果将在不同浏览器中都能正常显示。

另外，如果需要动态设置背景图像，可以在HTML的style元素中使用以下代码：

<style>
    body {
        margin: 0;
        padding: 0;
        background: -moz-linear-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%), url('/img/fondo-home.jpg') no-repeat;
        background: -ms-linear-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%), url('/img/fondo-home.jpg') no-repeat;
        background: -o-linear-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%), url('/img/fondo-home.jpg') no-repeat;
        background: -webkit-linear-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%), url('/img/fondo-home.jpg') no-repeat;
    }
</style>

这样可以动态设置背景图像，并且在不同浏览器中都显示渐变效果。如果需要兼容旧版本的IE浏览器，可以考虑使用CSS3Pie来实现渐变效果。可以访问css3pie.com获取更多信息。

0