Question

我试图让div的一部分透明，所以透明部分可以显示背景图案（用css制作的复杂图案）。所以我有一个view_main div和另外两个小div，div将是透明的并显示背景

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

left_space div

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

right_space div

#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但仍然没有， Here is a simple example，我试图通过left_space div显示背景（在这种情况下是绿色但在我的代码中是图案或图像）我也试过不透明但仍然没有！有人有什么想法？

这里是一个视觉表达 enter image description here

Answer 1

以下是使用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;
}

<强> DEMO

Answer 2

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

Reference Link on 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>

Answer 3

我可以推荐你，

#right_space你可以给出绿色

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

检查

Answer 4

您可以使用带有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;
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如何制作div的透明部分

4 个答案: