之前出现手机上图片和文字重叠的问题,但是在电脑上没有出现
然后认清了class和z-index,通过改变数值,和container的参数吗,解决了这个问题,最后让right:0,解决了这个问题,最后附上成功后的代码。
.main-half-layout {
background: url(../images/ico-tech.jpg) center center no-repeat;
width: 50%;
height: 100%;
position: absolute;
top: 0;
background-position: center center;
background-size: cover;
-webkit-background-size: cover;
}
.main-half-layout-1 {
background: url(../images/ico-tech-3.jpg) center center no-repeat;
width: 50%;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-position: center center;
background-size: cover;
-webkit-background-size: cover;
}
.main-half-layout-container {
position: relative;
padding: 80px 0;
padding-left: 20px;
padding-right: 20px;
width: 40%;
margin: 0 5%;
}
.main-half-layout-container.half_right_layout {
float: left;
margin-left: auto;
z-index: 0;
}
.main-half-layout-container.half_left_layout {
float: right;
margin-left: auto;
z-index: 1;
}
<!-- ABOUT -->
<section class="about light-bg">
<!-- Right Background -->
<div class="main-page-section half_left_layout">
<div class="main-half-layout-1 half_right_layout"> </div>
<!-- Left Content -->
<div class="main-half-layout-container half_right_layout" id="activity">
<div class="about-us-con">
<h3>Double-Blind Matching Algorithm</h3>
<p>ETD is a forerunner in double-blind matching technology to address data security concerns in
distributed
computing and big data applications. Because each node only possesses some nodes' dispersed data, the
calculation/index can only be derived from the data it sees. All nodes must execute coordinated actions
to
solve the matching problem.
Simultaneously, as an intermediary computer node, the auxiliary computing node is bidirectionally
encrypted (double-blind) for the data of the matching parties. CPCB (commutatively encrypted calculation
PCB, Commutative PCB) is the double-blind data PCB, and the consensus verification technique employs
asymmetrical group key broadcasting encryption.</p>
</div>
</div>
</div>
</section>
<!-- ABOUT -->
<section class="about light-bg">
<!-- Right Background -->
<div class="main-page-section half_right_layout">
<div class="main-half-layout half_left_layout"> </div>
<!-- Left Content -->
<div class="main-half-layout-container half_left_layout">
<div class="about-us-con">
<h3>ETD White Paper</h3>
<p>The scientific community is intrinsically characterized by restrictions in regards to mutual consensus,
widespread distribution, fair distribution of its product (i.e., knowledge), and so on. These are the
very
issues that blockchain solves efficiently with its transparency and immutability.
We, at ETD, created unique new solutions to solve various technical problems associated with
decentralized
research and create long-term ecological processes that are consistent with economic reasoning. Let’s
investigate the diverse practical value of blockchain and how it ties into scientific research through
our
white paper.</p>
</br>
<a href="./documents/517507901-ETD-WhitePaper-en-v5-2.pdf" class="btn">White Paper</a>
</div>
</div>
</div>
</section>
Class这一块写的有点冗余,但是最后的效果是对的,见下图