亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

<p>對(duì)於我的應(yīng)用程序，我正在創(chuàng)建一個(gè)具有非標(biāo)準(zhǔn)部分邊界的註冊(cè)頁(yè)面。您可以在這裡看到我試圖實(shí)現(xiàn)的效果： 這不是一個(gè)簡(jiǎn)單的圓弧——它有兩條直線(xiàn)，中間還有一個(gè)圓弧。 </p> <p>據(jù)我所知，實(shí)現(xiàn)此類(lèi)目標(biāo)的最佳方法是使用 SVG。問(wèn)題是，白色區(qū)域?qū)⒂幸粋€(gè)影像覆蓋整個(gè)區(qū)域。出於演示目的，我將使用淺藍(lán)色。如果您使用帶有 <code>background-image</code> 屬性的標(biāo)準(zhǔn) <code>div</code>，則 SVG 的白色不透明，因此您會(huì)得到以下結(jié)果： </p> <p>提示稍後閱讀<code>shape-outside</code> 和<code>clip-path</code> 屬性，這是我嘗試過(guò)的最新方法（注意我正在使用與樣式組件反應(yīng)）：</p> <pre class="brush:php;toolbar:false;">const LeftContainer = styled(FlexContainer)` width: 55%; height: 100%; background-color: lightblue; z-index: 1; /* background: linear-gradient(360deg, #FFFFFF 24.95%, rgba(255, 255, 255, 0) 50.95%), url(${process.env.PUBLIC_URL}/TestImage.png); `; const RightContainer = styled(FlexContainer)` width: 45%; height: 100%; /* background-color: ${colors.secondary600}; */ float: left; /* background-image: url(${process.env.PUBLIC_URL}/SignUpBackground.svg); */ background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; z-index: 5; clip-path: url(${process.env.PUBLIC_URL}/SignUpBackground.svg#sidebar); `;</pre> <p>仍然存在間隙，但不僅如此，SVG 形狀的底部三分之一被切掉了： </p> <p>我能夠使左側(cè)容器填充額外空間的唯一方法是使右側(cè)容器<code>位置：絕對(duì)</code>，但這會(huì)導(dǎo)致我計(jì)劃的登錄表單出現(xiàn)問(wèn)題添加到右側(cè)（它似乎沒(méi)有解決切斷svg 底部三分之一的問(wèn)題）。</p> <p>有沒(méi)有辦法讓右側(cè)容器保持在頁(yè)面流中，顯示 100% 的 svg，並確保左側(cè)容器與右側(cè)容器齊平？ </p> <p>編輯： 這是 SVG 程式碼：</p> <pre class="brush:php;toolbar:false;"><svg width="708" height="1056"svg width="708" height="1056" viewBox="0 0 708 1056" ;http://www.w3.org/2000/svg"> <clipPath id="sidebar"> <path d="M144.5 0H799.5V1056H144.5L23.4254 775.169C0.402533 721.768 -5.09917 662.442 7.710896850989&t 4042 7.71089&Ft. 79A"/> </clipPath> </svg></pre> <p>這是到目前為止的 React 元件（如您所見(jiàn)，構(gòu)建的早期階段）：</p> <pre class="brush:php;toolbar:false;">const SignUpPage = (props) => { return ( <Container> <LeftContainer> {/* Site logo and marketing copy, promo bubbles to go here. This side should be the one to shrink */} </LeftContainer> <RightContainer flexDirection="column" justify="center"> {/* Signup/Login form to go here */} </RightContainer> </Container> ); }</pre> <p>編輯2： 我已嘗試實(shí)施以下答案中的解決方案，但到目前為止，每個(gè)解決方案都至少存在一個(gè)問(wèn)題。從 ccprog 的建議開(kāi)始，我有點(diǎn)不確定，因?yàn)槌淌酱a似乎與方法的描述不匹配，但我嘗試實(shí)現(xiàn)它並得到了這個(gè)結(jié)果：（首先是程式碼，然後是結(jié)果圖像）</ p> <pre class="brush:php;toolbar:false;">const Container = styled(FlexContainer)` height: 523px; background-image: linear-gradient(360deg, #FFFFFF 24.95%, rgba(255, 255, 255, 0) 50.95%), url(${process.env.PUBLIC_URL}/SignUpImage.jpg); background-position: top right 282px; background-size: cover; background-repeat: no-repeat; `; const LeftContainer = styled(FlexContainer)` flex-grow: 1; ` const RightContainer = styled(FlexContainer)` width: 354px; background-image: url('data:image/svg xml,<svg viewBox="0 0 708 1056" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M144.5 0H799.5V1056H144.5L23.4254 775.169C0.402533 721.768 -5.09917 662.442 7.721.768 -5.09917 662.442 7.721089.71003000300030003000303030303030303000203; 16979A"/></svg>' ); background-size: 100% 100%; `</pre> <p>正如您所看到的，這實(shí)際上並沒(méi)有填充螢?zāi)坏恼麄€(gè)高度，即使在右側(cè)也是如此，並且左側(cè)圖像確實(shí)被切斷了（左側(cè)圖像是所有解決方案中的一個(gè)問(wèn)題，因?yàn)槟銜?huì)看到的）。 </p> <p>接下來(lái)，我嘗試實(shí)施 Chrwahl 的第二個(gè)解決方案。這個(gè)有點(diǎn)接近（右側(cè)看起來(lái)很棒），但左側(cè)圖像有一些問(wèn)題：</p> <pre class="brush:php;toolbar:false;">const Container = styled(FlexContainer)` width: 100%; height: 100vh; background-image: url(${process.env.PUBLIC_URL}/SignUpBackground.svg), linear-gradient(360deg, #FFFFFF 24.95%, rgba(255, 255, 255, 0) 50.95%), url(${process.env.PUBLIC_URL}/SignUpImage.jpg); background-repeat: no-repeat; background-position: right, left; background-size: contain, cover; margin-bottom: 5px; `;</pre> <p>我不確定它是否出現(xiàn)在該圖像中，但螢?zāi)坏恼麄€(gè)左側(cè)都是空白的，因此即使位置指定為左側(cè)，圖像似乎也不是從左邊緣開(kāi)始。 <code>background-size: 40%, 70%</code> 的問(wèn)題更嚴(yán)重： </p>

.container {
    display: flex;
    flex-direction: row;
    justify-items: stretch;
    align-items: stretch;
    height: 523px;
    background-image: linear-gradient(360deg, white, red);
    background-position: top right 282px;
    background-size: cover;
    background-repeat: no-repeat;
}
.container-left {
    flex-grow: 1;
}
.container-right {
    width: 354px;
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 708 1056" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M144.5 0H799.5V1056H144.5L23.4254 775.169C0.402533 721.768 -5.09917 662.442 7.71089 605.718L144.5 0Z" fill="%2316979A"/></svg>');
    background-size: 100% 100%;
}
.child {
  box-sizing: border-box;
  height: 100%;
  margin: 2px;
  border: 2px solid blue;
}

<div class="container">
  <div class="container-left">
    <div class="child"></div>
  </div>
  <div class="container-right">
    <div class="child"></div>
  </div>
</div>

preserveAspectRatio="xMinYMid slice"