0

虽然看起来很简单，但我需要为一个带有半透明容器的网站创建背景。如果我在opacity: 0.5;里面添加，#content我最终会拥有整个容器，所有的小部件和字母都会变成幽灵。我应该怎么做才能将透明度仅应用于背景图像？一个答案是为 PS 内部的图片添加透明度，但我仍然很好奇。

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

4 回答 4

1

解决此问题的一种方法是使用 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;
   }

警告：

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

希望有帮助。

于 2013-08-14T01:47:21.203 回答
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”。当然，您可以根据自己的喜好设置值。如果这有帮助，请单击复选标记；）

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

于 2013-08-14T01:38:41.403 回答
1

你有一个有趣的问题——类似的问题总是有有趣的解决方案。我自己是 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;
}
于 2013-08-14T01:55:18.207 回答
1

你可以这样做：

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。希望这可以帮助！

于 2013-08-14T02:00:49.803 回答