我正在尝试制作上面的布局。但不幸的是,我不能把它作为上面的布局。 我得到第二张图片作为我的结果。
代码:
.text_box_holder{
position: relative;
}
.text_box_holder h1{
text-align: right;
padding-right: 50%;
color: #fff;
background: inherit;
-webkit-background-clip: text;
}
.learn_more_in_box{
color: #fde428;
text-align: right;
padding-left: 31% !important;
-webkit-background-clip: text;
}
.yellow_box{
position: absolute;
border: 7px solid #fde428;
width: 40%;
height: 300px;
}
<div class="text_box_holder">
<div class="yellow_box"></div>
<h1>Consumer<br>Products<br>Consulting</h1>
<a href="" class="learn_more_in_box">LEARN MORE</a>
</div>
最佳答案
请尝试以下代码。我没有添加任何背景图像。我试过只用方框添加 2 个文本。
HTML
<div class="text_box_holder">
<div class="yellow_box"> </div>
<div class="text1">
<h1>Consumer<br>Products<br>Consulting</h1>
<div class="text2"><a href="">LEARN MORE</a></div>
</div>
</div>
CSS
.text1 {
margin-top: 30px;
position:absolute;
text-align: left;
color: #bc7e09;
}
.yellow_box{
margin-left: 60px;
position: absolute;
border: 5px solid #fde428;
width: 40%;
height: 300px;
}
如果你想为整个空间添加背景图像,你可以与HTML集成。我希望它能帮助你。
关于javascript - 我怎样才能把这个让这个框像图片中那样放在文本下面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48948051/