Question

我是代码的新手，我正在尝试编辑其中一个tumblr主题。我一直在破坏网络的教程，但我无法解决这个问题。我希望有一个透明的内容背景，我到目前为止，通过添加不透明度#background { background:{color:Content Background}; margin: 0 auto; width: 730px; **opacity: 0.5;** }，但我希望文本保持不透明。我该怎么办呢？

这就是我所拥有的：

 body {
   margin: 0 auto;
   width: 100%;
   height: 100%;
   background: {
     color: Background
   }
   url('{image:Background}');
   background-repeat:no-repeat;
   background-position:center;
   background-attachment:fixed;
   color: {
     color: Primary colour
   }
   ;
   font-family: {
     font: Body
   }
   ,
   Baskerville,
   Times,
   "Times New Roman",
   serif;
   font-weight:300;
   font-size:13px;
   line-height:24px;
 }
 #background {
   background: {
     color: Content Background
   }
   ;
   margin:0 auto;
   width:730px;
   opacity:0.5;
 }
 #background-inner {
   margin: 0 auto;
   background: {
     color: Content Background
   }
   ;
   border-left:15px solid;
   {
     color: Stripe
   }
   ;
   border-right:15px solid {
     color: Stripe
   }
   ;
   width:670px;
 }
 section#blog {
   margin: 0 auto;
   width: 670px;
 }

Answer 1

首先，你的CSS有一些错误。
其次，为了实现您的目标，您需要在background中使用RGBA。

为什么需要使用rgba？

根据MDN

该值适用于整个元素，包括其内容，即使该值不是由子元素继承的。因此，一个元素及其包含的子元素都具有相同的不透明度到元素的背景，即使元素及其子元素不同的不透明度相互之间。

段

＆＃13;

body {
  background: rgba(0, 0, 0, 0.5) /* background black with 50% opacity */
}

＆＃13;

<div>This will be opaque</div>

＆＃13;

在半透明背景的不透明的文本

1 个答案:

段