CSS背景不透明度[重复]

8 回答

• 40

  您可以使用CSS 3 :before 具有半透明背景，只需一个容器即可完成此操作 . 使用这样的东西

  <article>
    Text.
  </article>
  

  然后应用一些CSS

  article {
    position: relative;
    z-index: 1;
  }
  
  article::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;  
    opacity: .4; 
    z-index: -1;
    background: url(path/to/your/image);
  }
  

  样品：http://codepen.io/anon/pen/avdsi

  注意：您可能需要调整 z-index 值 .

  回复于 2024-04-27T13:21:34+08:00
• 6

  只需确保前景的宽度和高度与背景相同，或者尝试使用顶部，底部，左侧和右侧属性 .

  <style>
      .foreground, .background {
          position: absolute;
      }
      .foreground {
          z-index: 1;
      }
      .background {
          background-image: url(your/image/here.jpg);
          opacity: 0.4;
      }
  </style>
  
  <div class="foreground"></div>
  <div class="background"></div>
  

  回复于 2024-04-27T13:21:34+08:00
• 148

  .transbg{/* Fallback for web browsers that don't support RGBa */
  background-color: rgb(0, 0, 0);
  /* RGBa with 0.6 opacity */
  background-color: rgba(0, 0, 0, 0.6);
  /* For IE 5.5 - 7*/
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  /* For IE 8*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}
  

  回复于 2024-04-27T13:21:34+08:00
• 2

  这是因为内部div具有100％嵌入的div的不透明度（其具有40％的不透明度） .

  为了规避它，你可以做一些事情 .

  你可以创建两个单独的div，如下所示：

  <div id="background"></div>
  <div id="bContent"></div>
  

  为hte背景设置所需的css不透明度和其他属性，并利用z-index属性（z-index）来设置和定位bContent div . 有了这个，你可以放置背景div的div翻转，而不会有它的不透明度 .

  ---

  另一种选择是RGBa . 这将允许您嵌套div并仍然实现div特定的不透明度 .

  ---

  最后一个选项是在所需的图像编辑器中简单地制作一个半透明的.png图像，将background-image属性设置为图像的url，然后你就不用担心了与css和失去嵌套div结构的能力和组织 .

  回复于 2024-04-27T13:21:34+08:00
• 3

  儿童继承不透明 . 如果他们不这样做，那就太奇怪了 .

  您可以使用半透明png作为背景图像，或使用RGBa（a表示alpha）颜色作为背景颜色 .

  例如，50％褪色的黑色背景：

  <div style="background-color:rgba(0, 0, 0, 0.5);">
     <div>
        Text added.
     </div>
  </div>
  

  回复于 2024-04-27T13:21:34+08:00
• 4

  可以使用以下方法解决您的问题：

  • CSS Alpha透明度方法（在IE 8中不起作用）

  #div{background-color:rgba(255,0,0,0.5);}
  

  • 根据您的选择使用透明png图像作为背景 .

  • 使用以下css代码段创建跨浏览器Alpha透明背景 . 以下是 #000000 @ 0.4％不透明度的示例

  .div {  
      background:rgb(0,0,0);  
      background: transparent\9;  
      background:rgba(0,0,0,0.4);  
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);  
      zoom: 1;  
  }    
  .div:nth-child(n) {  
      filter: none;  
  }
  

  有关此技术的更多详细信息，请参阅this，它具有在线CSS生成器 .

  回复于 2024-04-27T13:21:34+08:00
• 973

  我会做这样的事情

  <div class="container">
    <div class="text">
      <p>text yay!</p>
    </div>
  </div>
  

  CSS：

  .container {
      position: relative;
  }
  
  .container::before {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: url('/path/to/image.png');
      opacity: .4;
      content: "";
      z-index: -1;
  }
  

  应该管用 . 这假设您需要具有半透明图像btw，而不是颜色（您应该使用rgba） . 还假设您不能在photoshop中预先改变图像的不透明度 .

  回复于 2024-04-27T13:21:34+08:00
• 26

  你可以使用sass transparentize ，我发现它是最有用和简单易用的 .

  transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
  transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)
  

  查看更多：http://sass-lang.com/documentation/Sass/Script/Functions.html#transparentize-instance_method

  回复于 2024-04-27T13:21:34+08:00