Question

所以，我有一个非常简单的div容器。

<div class="container"><div class="inside"></div></div>

和css：

.container{
 width:200px;
 height:100px;
 background-color:#dc5562;
}
.inside{
 width:150px;
 height:50px;
 margin:20px;
 background-color:rgba(50,80,115, 0.4);
 opacity: 1;
}

我想让inside div的底部变得模糊，以便它看起来只是模糊或平滑（因此没有明显的边界线）

我在网上找到了一些帮助，但它们似乎与背景图片一起使用。

非常感谢任何帮助！

谢谢！

Answer 1

改变你的：

background-color:rgba(50,80,115, 0.4);

到

background:linear-gradient(to bottom,rgba(50,80,115, 0.4), rgba(50,80,115, 0.3),rgba(50,80,115, 0.2),rgba(50,80,115, 0));

Answer 2

试试这个。

<!DOCTYPE html>
<html>

<head>
    <style>
	.container{
		width:200px;
		height:100px;
		background-color:#dc5562;
	}
	.inside{
		width:150px;
		height:50px;
		margin:20px;
		background: #985369;
		background: -moz-linear-gradient(top,  #985369 0%, #985369 50%, #985369 51%, #dc5562 100%);
		background: -webkit-linear-gradient(top,  #985369 0%,#985369 50%,#985369 51%,#dc5562 100%);
		background: linear-gradient(to bottom,  #985369 0%,#985369 50%,#985369 51%,#dc5562 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#985369', endColorstr='#dc5562',GradientType=0 );
	}
	</style>
</head>

<body>
    <div class="container">
        <div class="inside">

        </div>
    </div>
</body>

</html>

您可以生成自己的渐变here

Answer 3

您可以使用渐变来获得此效果。

有关linear-gradient

的更多信息

.container {
  width: 200px;
  height: 100px;
  background-color: #dc5562;
  position: relative;
}
.inside {
  width: 150px;
  height: 50px;
  margin: 20px;
  background: -webkit-linear-gradient(rgba(50, 80, 115, 0.4), #dc5562);
  background: -o-linear-gradient(rgba(50, 80, 115, 0.4), #dc5562);
  background: -moz-linear-gradient(rgba(50, 80, 115, 0.4), #dc5562);
  background: linear-gradient(rgba(50, 80, 115, 0.4), #dc5562);
}

<div class="container">
  <div class="inside">

  </div>
</div>

CSS模糊背景的一面

3 个答案: