Question

看起来很简单我需要为一个具有半透明容器的网站创建背景。如果我在opacity: 0.5;内添加#content，我将最终获得整个容器，所有小部件和字母都会变鬼。如何仅将透明度应用于背景图像？一个答案是增加PS内部图片的透明度，但我仍然很好奇。

#content .container {
    background:url(images/menu_bar.png) left top repeat-y !important;
}

Answer 1

尝试一下：

#content .container {
  width: 500px;
  height: 100px;
  background: url(../images/menu_bar.png) left top repeat-y rgba(0, 0, 0, 0.5) !important;
}

rgba中的'a'设置颜色的不透明度为'rgb'。当然，您可以根据自己的喜好设置值。如果这有帮助，请单击复选标记;）

另外，不要忘记设置图像的宽度和高度。

Answer 2

解决此问题的一种方法是使用position属性和z-index属性。您想要透明的元素将是下面的元素，然后不透明的内容将位于它上面。

示例：

#transparent-box {
   position: absolute; top: 10px; left: 10px;
   z-index: 1;
   }

#opaque-content {
   position: absolute; top: 20px; left: 20px;
   z-index: 2;
   }

警告：

当您使用此方法时，您必须记住您希望内容具有的缩进/填充，然后适当地定位它。

希望有所帮助。

Answer 3

你有一个有趣的问题 - 总是有一些有趣的解决方案。我自己也是CSS的忠实粉丝，我试图通过这里的一些CSS属性模仿你需要的行为：http://jsfiddle.net/Tax4w/

但是，如果这不是您所需要的，您可以随时调整它以满足您的需求。

注意：它第一次看起来也是透明的，但如果你仔细注意它不是

HTML：

<div class="container">
    <div class="inner-container">
        <p>I am a big cat</p>
        <p>I am a big cat</p>
        <p>I am a big cat</p>
        <p>I am a big cat</p>
    </div>
</div>

CSS：

.container{
    width:500px;
    height:500px;
    background-color:#eeeeee;
    position:relative;
}

.inner-container:after{
    content:"";
    background: url('http://placekitten.com/500/500') left top no-repeat;
    width:500px;
    height:500px;
    opacity:0.5;
    position:absolute;
    left:0px;
    top:0px;
}

.inner-container{
    width:500px;
    height:500px;
}

p{
    font-size:20px;
}

Answer 4

您可以这样做：

<强> HTML

<div class="wrapper">
    <div class="transparent"></div>
    <div class="content">Text goes here</div>
</div>

<强> CSS

.wrapper { 
    position: relative 
}
.transparent { 
    opacity: 0.5; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0;
    background: #000;
    z-index: 1;
}
.content {
    position: relative;
    z-index: 2;
    height: 100px;
    width: 100px;
}

这将分离出背景不透明度和内容不透明度。绝对定位将确保透明div覆盖整个父div。希望这有帮助！

如何在不更改整个容器的情况下更改css中背景的不透明度

4 个答案: