网页部分的半透明效果[重复]答案

【问题标题】：Translucent effect to section of webpage [duplicate]网页部分的半透明效果[重复]
【发布时间】：2016-03-29 15:54:49
【问题描述】：

我有我的网页的背景图片，我有这个

HTML：

<body>
    <div class="front">
         <p>Hello World</p>
    </div>
</body>

CSS：

.front{
    background-color:silver;
    height:200px;
    width:200px;
}

div的宽度和高度是200px,200px。我希望div元素覆盖的区域是半透明的，即。显示模糊背景，但 div 包含的文本也应该清晰。我该怎么做？

【问题讨论】：

标签： html css

【解决方案1】：

你需要一个rgba 背景：

background-color: rgba(192,192,192,0.5);

可以使用红绿蓝阿尔法模型 (RGBa) 定义颜色 rgba() 函数符号。 RGBa 将 RGB 颜色模型扩展到包括 alpha 通道，允许指定 a 的不透明度颜色。 a 表示不透明度：0=透明； 1=不透明；

【讨论】：

应该真的有一个 rgb 后备，以防浏览器不支持 rgba
是的，对于没有浏览器的人来说，这是一个后备方案。 ;)

【解决方案2】：

您可以简单地将 opacity: 0.5; 添加到您的 css 类中。

【讨论】：

【解决方案3】：

您可以将 rgba 用于背景图像，因为添加不透明度也会将其应用于 div 中的文本。

background-color: rgba(192,192,192,0.5);

但这在 IE 中不受支持。

因此，您可以使用 background-image 属性创建和应用透明背景图像。

【讨论】：

【解决方案4】：

您可以对背景图像使用不透明度，并使用before 选择器来保持文本的不透明度：

像这样：

.front {
  z-index: 1;
}
.front:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url("http://webneel.com/wallpaper/sites/default/files/images/01-2014/23-animation-wallpaper.preview.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 0.4;
  filter: alpha(opacity=40);
  height: 200px;
  width: 200px;
}
.font > p {
  z-index: -1;
  opacity: 1;
  filter: alpha(opacity=100);
}

<div class="front">
  <p>Hello World</p>
</div>

JSFIDDLE DEMO

【讨论】：

【解决方案5】：

试试这个css：

.front{
     background-color:silver;
    height:200px;
    width:200px;
    opacity: 0.4;
}

根据您的选择增加或减少不透明度。

【讨论】：

【解决方案6】：

在 CSS 中使用不透明度是最简单的方法。

【讨论】：

【解决方案7】：

好吧，开箱即用，如果您尝试一些不同的标记，您真的可以模糊您的图像。

来了

.front{
    background-color:silver;
    height:200px;
    width:200px;
     -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    z-index:0;
}
.back{
  position: absolute;
  top: 0;
}

<body>
  <div class="front"></div>
  <div class="back">
    <p>Hello World</p>
  </div>
</body>

【讨论】：