css 在線性漸變半部分內插入圖像
[英]css insert image inside linear-gradient half part
問題描述
我有一個 css 背景 animation 將屏幕分成 2 個顏色部分，左側 div 1 為黑色，右側 div 2 為白色。 但是，我想讓 div 2 右側的白色部分成為圖像背景，同時保留黑色部分。
如何將圖像封面插入右側白色部分而不影響左側黑色部分
這是我想在 div 2 中覆蓋的示例圖片封面
下面是我的代碼
body, html { margin: 0; padding: 0; }.bg { min-height: 100vh; animation: BgAnimation; -webkit-animation: BgAnimation; -moz-animation: BgAnimation; background: linear-gradient(106deg, #313131 50%, white 50.1%); animation-duration: 1.3s; animation-iteration-count: 1; animation-fill-mode: forwards; animation-timing-function: ease-in-out; background-size: 200% 200%; } @keyframes BgAnimation { 0% { background-position: 0% 0%; } 100% { background-position: 50% 50%; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } #wrapper { display: flex; } #left { flex: 0 0 65%; color: white; margin-left: 10%; margin-top: 20%; animation: fadein 3s; } #right { flex: 1; margin-right: 5%; margin-top: 20%; font-size: 21px; text-align: center; animation: fadein 6s; -moz-animation: fadein 6s; /* Firefox */ -webkit-animation: fadein 6s; /* Safari and Chrome */ -o-animation: fadein 6s; }
<body> <div class="bg"> <div id="wrapper"> <div id="left">1 div</div> <div id="right">2 div</div> </div> </div> </body>
1 個解決方案
解決方案1
1 已采納 2021-05-04 10:49:00
使您的漸變黑色/透明並將圖像放在其下方：
body { margin: 0; }.bg { min-height: 100vh; background: linear-gradient(106deg, #313131 50%, transparent 50.1%), url(https://i.stack.imgur.com/bPLa1m.jpg) right; animation: BgAnimation 1.3s forwards; background-size: 200% 200%,80% auto; } @keyframes BgAnimation { 0% { background-position: 0% 0%,right; } 100% { background-position: 50% 50%,right; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } #wrapper { display: flex; } #left { flex: 0 0 65%; color: white; margin-left: 10%; margin-top: 20%; animation: fadein 3s; } #right { flex: 1; margin-right: 5%; margin-top: 20%; font-size: 21px; text-align: center; animation: fadein 6s; }
<div class="bg"> <div id="wrapper"> <div id="left">1 div</div> <div id="right">2 div</div> </div> </div>
CSS邊界圖像線性漸變
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.