2

我试图使 div 的一部分透明，以便透明部分可以显示背景图案（用 css 制作的复杂图案）。所以我有一个 view_main div 和 2 个其他小 div，这些 div 将是透明的并显示背景

#View_main{
 margin-left:7%;
 top: 15%;
 height:100%;
 width:70%;
 background-color:white;
 position:relative;
 border:0;
 z-index:1;
}

left_spacediv _

#left_space{
 height:12%;
 width:12%;
 background-color:transparent;
 margin: auto;
 position: absolute;
 top: 0; left: -100%; bottom: 0; right: 0;
}

right_spacediv _

#right_space{
 height:12%;
 width:12%;
 background-color:red;
 margin: auto;
 position: absolute;
 top: 0; left: 0; bottom: 0; right: -100%;
}

我试图用 z-index=2 和 view_main z-index=1 来制作 left_space，但仍然没有， 这是一个简单的例子，我试图显示背景（在这种情况下是绿色的，但在我的代码中是来自left_space div的图案或图像）我也尝试了不透明度，但仍然没有！有人知道吗？

这是一个视觉呈现 在此处输入图像描述

4

4 回答 4

4

before这是使用和after伪类创建蓝色形状的代码

body {
  background-color: green;
}

.container {
  margin: 50px auto;
  height: 300px;
  width: 210px;
  background-color: blue;
  position: relative;
}
.container:before, .container:after {
  content: "";
  height: 44%;
  position: absolute;
  background-color: blue;
  z-index: -1;
  width: 112%;
  left: -6%;
}
.container:before {
  top: 0;
}
.container:after {
  bottom: 0;
}

演示

于 2013-10-29T12:58:19.043 回答
0

在要使其透明的 div 中使用 opacity 属性并将其值从 0.1 设置为 1

w3cschools 上的参考链接

从您上面的图表和您提供的代码链接中，我修改了您的代码以获得该结构：

<!DOCTYPE html>
<html>

<style>
  body{
    background-color:green;
  }
  #View_main{
    margin-left:7%;
    top: 15%;
    height:300px;
    width:210px;
    background-color:blue;
    position:relative;
    border:0;

}

#left_space{
    height:12%;
    width:12%;

    background-color:green;
    margin: auto;
    position: absolute;
    top: 0; left: -88%; bottom: 0; right: 0;
    opacity:1;
}


 </style>
 <body>

 <body><div id="View_main">


 <div id="left_space"></div>
 </div>
 </body>

  </body>
 </html>
于 2013-10-29T09:28:23.790 回答
0

我可以参考你

你#right_space可以给绿色

http://jsfiddle.net/5BZdF/3/

检查这个

于 2013-10-29T10:48:09.023 回答
0

您可以使用带有大型box-shadow绘制:before或:after伪元素的透明框。

HTML：

<div id="View_main"></div>

CSS：

#View_main {
  position:relative;
  overflow: hidden;
  height:300px;
  width:210px;
}

#View_main:before {
  box-shadow: 0 0 0 1000px blue;
  position: absolute;
  margin-top: -40px;
  content: '';
  height: 80px; /* Change width and height to increase or decrease transparent box area */
  width: 20px;
  opacity: 1;
  top: 50%;
  left: 0;
}


body{
  background-color:green;
}

#View_main {
  position:relative;
  overflow: hidden;
  margin-left:7%;
  height:300px;
  width:210px;
  border:0;
  top: 15%;
}

#View_main:before {
  box-shadow: 0 0 0 1000px blue;
  position: absolute;
  margin-top: -40px;
  content: '';
  height: 80px;
  width: 20px;
  opacity: 1;
  top: 50%;
  left: 0;
}
<body>
  <div id="View_main"></div>
</body>

于 2016-12-19T15:21:30.427 回答