Question

如何在CSS3中将背景图像与降级的背景色相结合？

css代码：

background: linear-gradient(rgb(208, 208, 208), rgb(242, 242, 242) 50%, rgb(208, 208, 208)) repeat scroll 0% 0% transparent;
box-shadow: 0px 0px 5px rgb(51, 51, 51);
border: 1px solid rgb(239, 241, 239);
position: relative;

图像是这样的：

http://d227xyj983n2jj.cloudfront.net/wp-content/uploads/2013/09/scoring.png

该图像就是一个例子。我知道这种效果因图像合并而降低效果很好......但我不知道结合起来......帮帮忙！

Answer 1

您可以在背景中组合渐变和图像，请参阅：
How do I combine a background-image and CSS3 gradient on the same element?

为了增加透明度，你可以简单地使用rgba()而不是像这样的rgb（）：

<强> Working Example

html,
body {
  height: 100%;
}
div {
  background: url("http://d227xyj983n2jj.cloudfront.net/wp-content/uploads/2013/09/scoring.png") repeat scroll 0% 0%, -moz-linear-gradient(rgba(208, 208, 208, 0.5), rgba(242, 242, 242, 0.5) 50%, rgba(208, 208, 208, 0.5));
  box-shadow: 0px 0px 5px rgb(51, 51, 51);
  border: 1px solid rgb(239, 241, 239);
  position: relative;
  height: 100%;
}

<div></div>

将背景色CSS3与半透明图像相结合

1 个答案: