Question

我创建了一个页面，其中我使用了图像作为背景。在身体内部，我创建了具有背景颜色的div元素。但是我的div元素在身体背景图像上重叠。我希望我的正文背景图片在 div元素上可见。我在一些网站上看到背景在其他元素上是可见的。

我的HTML代码如下：

<body>

<div class="travel-section">
    <div class="travel-inner-section">

    </div>
</div>
</body>

CSS：

body{
/*background-color:rgba(0,57,77,1);*/
background-image:url("../images/travel.jpg");
}

.travel-section{
margin-right:4px;
margin-left:4px;
margin-top:120px;
height:240px;
background-color:#2ecc71;

 }

 .travel-inner-section{
margin-right:4px;
margin-left:4px;
height:40px;
background-color:#27ae60;
opacity:0.5;
box-shadow:2px green;
 }

Answer 1

你需要这样的东西吗？你在哪里看不到div的背景，但背后的元素背景是可见的？

您需要添加背景：对您的CSS透明。

所以这样：

.travel-section{
    margin-right:4px;
    margin-left:4px;
    margin-top:120px;
    height:240px;
    background: transparent;
}

http://jsfiddle.net/kg8Z8/1/

或者你想看到div的背景颜色，但是看一下它？然后你必须使用不透明度，如下所示：

.travel-section{
    margin-right:4px;
       margin-left:4px;
    margin-top:120px;
    height:240px;
    background-color: #2ecc71;
    opacity: 0.8;
 }

http://jsfiddle.net/kg8Z8/

Answer 2

JSFiddle

如果您希望div透明，可以执行以下操作：

.travel-section{
  margin-right:4px;
  margin-left:4px;
  margin-top:120px;
  height:240px;
  background-color:rgba(46, 204, 113, 0.6);
}

rgba是red，green, blue，alpha。 alpha是控制透明度的原因。

如果没有，您可以将display:none;放入.travel-section并隐藏它。

Answer 3

将opacity:0.3添加到旅行部分，在这种情况下，您的身体背景将会显示。

.travel-section{
margin-right:4px;
margin-left:4px;
margin-top:120px;
height:240px;
background-color:#2ecc71;
opacity: 0.3;
 }

将不透明度的值调整为0到1之间。

Answer 4

你的问题不明确，但如果我明白了，here就是一个例子。

body {
    background-image: url(http://hdlatestwallpaper.com/wp-content/uploads/2014/05/Green-Bubbles-Awesome-Background.jpg);
}
.travel-section {
    margin-right:4px;
    margin-left:4px;
    margin-top:120px;
    height:240px;
    background-color: rgba(46, 204, 113, 0.7);
}

将background-color属性设置为rgba()时，必须设置其RGB值和Alpha值。这将帮助您只有半透明背景 ¹。如果你想要一个半透明div ²，那么只需将opacity属性设置为0（0％）和1（100％）之间的值。

¹具有半透明背景意味着只有div的背景将具有介于0和0.99之间的不透明度，因为div的内容将是不透明的（alpha = 1）。

²将opacity设置为介于0和0.99之间的值将导致半透明元素。这意味着div的背景和内容都是半透明的。

我希望背景在Div元素上可见

4 个答案: