目标:HTML中要在<article>
中(也就是卡片中间的联系方式)添加半透明的背景颜色
<article><img src="chris.jpg" alt="A picture of Chris - a man with glasses, a beard, and a silly wooly hat"><p>50 My Street<br>The Town<br>Gray Peach<br>UK<br>ZO50 1MU<br><strong>Tel</strong>: 01234 567 890<br><strong>Mail</strong>: chris@</p></article>
错误示范
CSS:
article {background-color:#000; opacity:0.5; }
输出结果:
问题出现的原因:
我的目标是想表示半透明的黑色背景,也就是灰色透明背景。
但是我的css设置的是 background-color:#000; opacity:0.5;
这表示背景颜色是黑色,然后再半透明。但这导致整个<article>
的内容都是半透明的。不仅仅是背景颜色半透明,文本和照片也是半透明。这就导致原本的文字被黑色覆盖掉了,再半透明时是看不到的。所以需要把opcity:0.5;给删除。
让背景半透明只有一个办法,就是用rgba颜色
background: rgba(0, 0, 0, 0.5)
解决方法:
CSS
article {background: rgba(0, 0, 0, 0.5);}```输出结果:![在这里插入图片描述](https://img-/0907160636764.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NhcGdyYXM=,size_16,color_FFFFFF,t_70)