我正在弯曲 2 个元素,它们重叠约 25%。使用混合混合模式,它可以很好地混合背景,也可以很好地混合文本。
JS在这里小提琴:https://jsfiddle.net/simohell/q9breg60/
我尝试使用 ::before 应用混合模式,但我无法弄清楚。
.wrapper {
display: flex;
}
.text {
margin-top: 30px;
flex: 0 0 50%;
padding: 30px;
background-color: rgba(17, 38, 59, .95);
mix-blend-mode: multiply;
}
h1,
p {
color: #fff;
}
.image {
flex: 0 0 75%;
margin-left: -25%;
background: url("https://images.unsplash.com/photo-1456298964505-ef9e1a638209?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80");
background-size: cover;
mix-blend-mode: multiply;
}
<div class="wrapper">
<div class="text">
<h1>Welcome to this snippet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolore quaerat cupiditate accusantium eligendi vitae quas omnis obcaecati unde deserunt. Quibusdam aspernatur magni accusamus debitis distinctio iusto aliquam natus magnam?</p>
</div>
<div class="image"> </div>
</div>
将文本的背景移动到主包装器,然后增加其 z 索引以允许图像仅与背景混合。主要技巧是调整渐变的大小,以仅模拟文本的相同背景:
.wrapper {
display: flex;
background:
linear-gradient(rgba(17, 38, 59, .95),rgba(17, 38, 59, .95))
bottom left/
50% /*widh:50% */
calc(100% - 30px) /*height:100% - top margin */
no-repeat;
}
.text {
margin-top: 30px;
flex: 0 0 50%;
padding: 30px;
z-index:2;
}
h1,p {
color: #fff;
}
.image {
flex: 0 0 75%;
margin-left: -25%;
background: url("https://images.unsplash.com/photo-1456298964505-ef9e1a638209?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80");
background-size: cover;
mix-blend-mode: multiply;
}
body {
margin:0;
}
* {
box-sizing:border-box;
}
<div class="wrapper">
<div class="text">
<h1>Welcome to this snippet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolore quaerat cupiditate accusantium eligendi vitae quas omnis obcaecati unde deserunt. Quibusdam aspernatur magni accusamus debitis distinctio iusto aliquam natus magnam?</p>
</div>
<div class="image"> </div>
</div>
您还可以将图像移动到主包装器的背景并考虑background-blend-mode
.您还将有一个简化的代码:
.wrapper {
overflow:auto;
background:
url("https://images.unsplash.com/photo-1456298964505-ef9e1a638209?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80")
center/cover content-box,
linear-gradient(rgba(17, 38, 59, .95),rgba(17, 38, 59, .95))
bottom left/
50% /*widh:50% */
calc(100% - 30px) /*height:100% - top margin */
no-repeat;
padding-left:25%;
background-blend-mode: multiply;
}
.text {
margin-top: 30px;
width:66.6%; /* we added 25% of padding so we need 66.6% from 75% to get 50%*/
margin-left:-33.4%; /* we shift back by the added margin 25% (33.4% of 75%)*/
padding: 30px;
}
h1,p {
color: #fff;
}
body {
margin:0;
}
* {
box-sizing:border-box;
}
<div class="wrapper">
<div class="text">
<h1>Welcome to this snippet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea dolore quaerat cupiditate accusantium eligendi vitae quas omnis obcaecati unde deserunt. Quibusdam aspernatur magni accusamus debitis distinctio iusto aliquam natus magnam?</p>
</div>
</div>