Question

这有效：

std::istream::operator bool()

然而，这不起作用：

.header {
  background: linear-gradient(to bottom, rgba(100, 100, 100, 1.0), rgba(0, 0, 0, 0.1)), url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_coffee-bgnd.jpeg");
  height: 400px;
  background-position: center center;
}

任何人都有任何解释原因？为什么我不能仅使用颜色叠加.header { background: rgba(100, 100, 100, 0.5), url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_coffee-bgnd.jpeg"); height: 400px; background-position: center center; }图像RGBA而不使用线性渐变？

请不要杀了我，完全是初学者。

Answer 1

你喜欢这样的代码：

这里有id工作演示：https://output.jsbin.com/voyotep

<强> HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="layer"></div>
</body>
</html>

<强> CSS：

html {
  background:url('https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-4/htmlcss1-img_coffee-bgnd.jpeg');
  min-height:100%;
  background-size:cover;
  position: relative;
}

.layer {
    background-color: rgba(100, 100, 100, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

CSS背景图像颜色叠加

1 个答案: