如何使用CSS为文本或图像提供透明背景?

仅使用CSS,是否可以使background元素的元素半透明,但元素的内容(文本和图像)不透明?

我想在不将文本和背景作为两个单独的元素的情况下完成此操作。

仅使用CSS,是否可以使background元素的元素半透明,但元素的内容(文本和图像)不透明?

我想在不将文本和背景作为两个单独的元素的情况下完成此操作。

 

仅使用CSS,是否可以使background元素的元素半透明,但元素的内容(文本和图像)不透明?

我想在不将文本和背景作为两个单独的元素的情况下完成此操作。

 

仅使用CSS,是否可以使background元素的元素半透明,但元素的内容(文本和图像)不透明?

我想在不将文本和背景作为两个单独的元素的情况下完成此操作。

 

仅使用CSS,是否可以使background元素的元素半透明,但元素的内容(文本和图像)不透明?

我想在不将文本和背景作为两个单独的元素的情况下完成此操作。

 

尝试时:

 

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

解决方案:

使用半透明的PNG图像或使用CSS 3:

background-color: rgba(255, 0, 0, 0.5);

这是来自css3.info,不透明度,RGBA和妥协的文章(2007-06-03)。


 

<p style="">
  <span>Hello, World!</span>
</p>

本文首发于前端黑洞网,博客园同步跟新

 

 
 
 
posted @ 2021-04-30 15:27  python之恋  阅读(26)  评论(0编辑  收藏  举报