我如何使用CSS3渐变为我的背景颜色,然后应用背景图像应用某种轻透明纹理?


当前回答

如果你想要一个在中心只有一个背景图像的渐变,你可以用一行代码做到,像这样:

body {
  background:  url(logo.png) no-repeat fixed center center, linear-gradient(#00467f, #a5cc82) fixed;
}

其他回答

你可以使用多个背景:linear-gradient();调用,但是试试这个:

如果你想要图像完全融合在一起,而不是因为不同的HTTP请求而分别加载元素,那么可以使用这种技术。这里我们在同一个元素上同时加载两个东西…

只需要确保先将预渲染的32位透明png图像/纹理转换为base64字符串,并在background-image css调用中使用它(在本例中取代INSERTIMAGEBLOBHERE)。

我使用这种技术来融合晶圆外观纹理和其他图像数据,这些数据是用标准rgba透明/线性梯度css规则序列化的。比多层艺术和浪费HTTP请求更好,这对移动是不利的。所有内容都在客户端加载,不需要文件操作,但确实增加了文档字节大小。

 div.imgDiv   {
      background: linear-gradient(to right bottom, white, rgba(255,255,255,0.95), rgba(255,255,255,0.95), rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.85), rgba(255,255,255,0.8) );
      background-image: url("data:image/png;base64,INSERTIMAGEBLOBHERE");
 }

我的解决方案:

background-image: url(IMAGE_URL); /* fallback */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);

我用那种方法解决问题。我在HTML中定义渐变,在主体中定义背景图像

html { Background-image: -webkit-gradient(线性,左下,右上,颜色停止(0.31,rgb(227, 227, 227)),颜色停止(0.66,rgb(199, 199, 199)),颜色停止(0.83,rgb(184, 184, 184)); 背景-图像:-moz-linear-gradient(左下,rgb(227, 227, 227) 31%, rgb(199, 199, 199) 66%, rgb(184, 184, 184) 83%); 高度:100% } 身体{ 背景:url(“http://www.skrenta.com/images/stackoverflow.jpg”); 高度:100% }

如果你想要一个在中心只有一个背景图像的渐变,你可以用一行代码做到,像这样:

body {
  background:  url(logo.png) no-repeat fixed center center, linear-gradient(#00467f, #a5cc82) fixed;
}

这是一个渐变叠加的背景图片,26%是不透明度,7度是渐变位置

CSS梯度生成器

backgroundImage: `linear-gradient(7deg, rgba(2,0,36,1) 0%, rgba(39,17,68,1) 26%, rgba(10,19,20,0.49343487394957986) 100%), url('backgroundImg.jpeg')`,