Question

我有一个背景图片，我想用CSS3替换它，因为它更容易交换颜色等。但是我在CSS方面有些挣扎，玩

background: rgba(255,255,255,0.5);
-webkit-box-shadow: inset 0 0 0px 50px rgba(255,255,255,0.5);
box-shadow: inset 0 0 0px 50px rgba(255,255,255,0.5);

但是我似乎无法获得所需的效果

在页面上我有一个div ...，因此代码非常简单：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>

<body class="background">
    <div class="whitebackground">
        Content in black here
    </div>
</body>
</html>

有人建议在CSS3中获得相同的效果吗？

谢谢

Answer 1

我将使用与白色背景div的不透明度匹配的框阴影来实现此目的。

在白色背景div上类似：

background-color: rgba(255,255,255,.7);
box-shadow: 0px 0px 30px 25px rgba(255,255,255,.7);

.background {
  background-image: url('https://picsum.photos/800/500');
  background-size: cover;
  background-repeat: no-repeat;
  width: 800px;
  height: 500px;
  padding: 80px;
}

.whitebackground {
  padding: 100px;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,.7);
  box-shadow: 0px 0px 30px 25px rgba(255,255,255,.7);
}

<div class="background">
  <div class="whitebackground">
    <h1> Content in here </h1>
  </div>
</div>

Div充满白色透明背景，边缘变得完全透明

1 个答案: