如何創建帶有背景圖像的傾斜透明形狀？

Question

我想實現這樣的目標 - 它有一個背景圖像。 我只能像這樣制作一個傾斜的 div-

 .shape { position: relative; width: 100%; height: 290px; background: rgba(6, 180, 248, 1); }.shape:after { position: absolute; width: 100%; height: 100%; content: ""; background: inherit; top: 0; right: 0; bottom: 0; left: 0; transform-origin: top left; transform: skewY(-4deg); }

 <br><br><br> <section class="container"> <div class="shape"> </div> </section>

但是我怎樣才能使背景圖像透明呢？ 誰能幫幫我嗎

Answer 1

我在這里嘗試了這個例子，我希望這會對你有所幫助，只需將整個代碼復制到一個 html 頁面中並查看輸出...，或查看下面的代碼片段

 .hero img { -webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); }.promo { -webkit-clip-path: polygon(0 0, 1600px 0, 1600px 87%, 0 100%); clip-path: polygon(0 0, 1600px 0, 1600px 87%, 0 100%); }.hero { color: #fff; font-family: 'Fira Sans', sans-serif; position: relative; text-align: center; text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); }.hero img { width: 100%; }.hero figcaption { left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; }.hero h1 { font-size: 32px; }.hero p { font-size: 14px; font-weight: 300; margin-top: 0.5em; }.promo { background: url(https://tractionnext.com/wp-content/uploads/2019/01/book-demo-hero-background.jpg) no-repeat; background-size: cover; color: #fff; font-family: 'Fira Sans', sans-serif; margin: 50px 0; overflow: hidden; padding: 150px 20px; position: relative; text-align: center; text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); }.promo h1 { font-size: 32px; }.promo p { font-size: 14px; font-weight: 300; margin-top: 0.5em; }.quote { background: #41ade5; position: relative; z-index: 1; }.quote:before, .quote:after { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; }.quote:before { top: 0; -webkit-transform: skewY(1.5deg); transform: skewY(1.5deg); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; }.quote:after { bottom: 0; -webkit-transform: skewY(-1.5deg); transform: skewY(-1.5deg); -webkit-transform-origin: 100%; transform-origin: 100%; }.quote { color: #fff; font-family: 'Fira Sans', sans-serif; margin: 50px 0; padding: 20% 20px; text-align: center; } h1 { font-size: 32px; font-weight: 500; }.edge--bottom { position: relative; z-index: 1; }.edge--bottom:after { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; }.edge--bottom:after { bottom: 0; -webkit-transform: skewY(-1.5deg); transform: skewY(-1.5deg); -webkit-transform-origin: 100%; transform-origin: 100%; }.edge--bottom--reverse { position: relative; z-index: 1; }.edge--bottom--reverse:after { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; }.edge--bottom--reverse:after { bottom: 0; -webkit-transform: skewY(1.5deg); transform: skewY(1.5deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; }.edge--top { position: relative; z-index: 1; }.edge--top:before { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; }.edge--top:before { top: 0; -webkit-transform: skewY(1.5deg); transform: skewY(1.5deg); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; }.edge--top--reverse { position: relative; z-index: 1; }.edge--top--reverse:before { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; }.edge--top--reverse:before { top: 0; -webkit-transform: skewY(-1.5deg); transform: skewY(-1.5deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; }.edge--both { position: relative; z-index: 1; }.edge--both:before, .edge--both:after { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; }.edge--both:before { top: 0; -webkit-transform: skewY(1.5deg); transform: skewY(1.5deg); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; }.edge--both:after { bottom: 0; -webkit-transform: skewY(-1.5deg); transform: skewY(-1.5deg); -webkit-transform-origin: 100%; transform-origin: 100%; }.edge--both--reverse { position: relative; z-index: 1; }.edge--both--reverse:before, .edge--both--reverse:after { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; }.edge--both--reverse:before { top: 0; -webkit-transform: skewY(-1.5deg); transform: skewY(-1.5deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; }.edge--both--reverse:after { bottom: 0; -webkit-transform: skewY(1.5deg); transform: skewY(1.5deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; }.-berry { background: #b52b4a; }.-blue { background: #41ade5; }.-orange { background: #de6628; }.-green { background: #5e9b42; }.block { color: #fff; font-family: 'Fira Sans', sans-serif; margin: 0 0 200px; padding: 20% 20px; text-align: center; } h1 { font-size: 32px; font-weight: 500; } p { font-size: 14px; font-weight: 300; margin-top: 0.5em; }

 <div class="hero"> <figure> <img src="https://tractionnext.com/wp-content/uploads/2019/01/book-demo-hero-background.jpg" /><figcaption> <h1> Angled Edge </h1> <p> Image with CSS clip-path </p> </figcaption> </figure> </div> <div class="promo"> <h1> Angled Edge </h1> <p> CSS background with CSS clip-path </p> </div> <div class="quote"> <h1> Angled Edges </h1> <p> With 2 Pseudo Elements </p> </div> <div class="block -berry edge--bottom"> <h1> Bottom Angled Edge </h1> </div> <div class="block -blue edge--bottom--reverse"> <h1> Bottom Angled Edge </h1> <p> Reversed </p> </div> <div class="block -berry edge--top"> <h1> Top Angled Edge </h1> </div> <div class="block -blue edge--top--reverse"> <h1> Top Angled Edge </h1> <p> Reversed </p> </div> <div class="block -orange edge--both"> <h1> Top & Bottom Angled Edges </h1> </div> <div class="block -green edge--both--reverse"> <h1> Top & Bottom Angled Edges </h1> <p> Reversed </p> </div>

Answer 2

這是我的修改版（簡體版）

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>SLANTED</title> <style> body { margin;0: padding;0: font-family,Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana; sans-serif: background: url(https.//unsplash?it/1600/900;image=830) no-repeat 0 0: background-size; 100% auto: } * { -webkit-box-sizing;border-box: box-sizing;border-box: } h1 { max-width;80%: margin;auto: font-size; 46px: text-align;center: padding; 10% 0: color; #FFF. }:container { width;100%: min-height;450px. }:container::after { content; '': display; block: width; 100%: height; 80px: position; absolute: transform; skewY(-2deg): background-color; #fff: bottom; -45px; } </style> </head> <body> <section class="container"> <div class="shape"> <h1>We always do something with pure CSS&hellip;</h1> </div> </section> <h2>Sub sections</h2> <h2>Sub sections</h2> <h2>Sub sections</h2> <h2>Sub sections</h2> <h2>Sub sections</h2> <h2>Sub sections</h2> </body> </html>

Answer 3

我已經嘗試了一個新的，看看它，如果你不同意，請忽略我

 .hero img { -webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); }.promo { -webkit-clip-path: polygon(0 0, 1600px 0, 1600px 87%, 0 100%); clip-path: polygon(0 0, 1600px 0, 1600px 87%, 0 100%); }.hero { color: #fff; font-family: 'Fira Sans', sans-serif; position: relative; text-align: center; text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); }.hero img { width: 100%; }.hero figcaption { left: 50%; position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; }.hero h1 { font-size: 32px; }.hero p { font-size: 14px; font-weight: 300; margin-top: 0.5em; }.promo { /*background: url(https://unsplash.it/1600/900?image=830) no-repeat;*/ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url("https://unsplash.it/1600/900?image=830"); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-size: cover; color: #fff; font-family: 'Fira Sans', sans-serif; margin: 50px 0; overflow: hidden; padding: 150px 20px; position: relative; text-align: center; text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5); }.promo h1 { font-size: 32px; }.promo p { font-size: 14px; font-weight: 300; margin-top: 0.5em; }.quote { background: #41ade5; position: relative; z-index: 1; }.quote:before, .quote:after { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; }.quote:before { top: 0; -webkit-transform: skewY(1.5deg); transform: skewY(1.5deg); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; }.quote:after { bottom: 0; -webkit-transform: skewY(-1.5deg); transform: skewY(-1.5deg); -webkit-transform-origin: 100%; transform-origin: 100%; }.quote { color: #fff; font-family: 'Fira Sans', sans-serif; margin: 50px 0; padding: 20% 20px; text-align: center; } h1 { font-size: 32px; font-weight: 500; }.edge--bottom { position: relative; z-index: 1; }.edge--bottom:after { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; }.edge--bottom:after { bottom: 0; -webkit-transform: skewY(-1.5deg); transform: skewY(-1.5deg); -webkit-transform-origin: 100%; transform-origin: 100%; }.edge--bottom--reverse { position: relative; z-index: 1; }.edge--bottom--reverse:after { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; }.edge--bottom--reverse:after { bottom: 0; -webkit-transform: skewY(1.5deg); transform: skewY(1.5deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; }.edge--top { position: relative; z-index: 1; }.edge--top:before { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; }.edge--top:before { top: 0; -webkit-transform: skewY(1.5deg); transform: skewY(1.5deg); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; }.edge--top--reverse { position: relative; z-index: 1; }.edge--top--reverse:before { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; }.edge--top--reverse:before { top: 0; -webkit-transform: skewY(-1.5deg); transform: skewY(-1.5deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; }.edge--both { position: relative; z-index: 1; }.edge--both:before, .edge--both:after { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; }.edge--both:before { top: 0; -webkit-transform: skewY(1.5deg); transform: skewY(1.5deg); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; }.edge--both:after { bottom: 0; -webkit-transform: skewY(-1.5deg); transform: skewY(-1.5deg); -webkit-transform-origin: 100%; transform-origin: 100%; }.edge--both--reverse { position: relative; z-index: 1; }.edge--both--reverse:before, .edge--both--reverse:after { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; }.edge--both--reverse:before { top: 0; -webkit-transform: skewY(-1.5deg); transform: skewY(-1.5deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; }.edge--both--reverse:after { bottom: 0; -webkit-transform: skewY(1.5deg); transform: skewY(1.5deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; }.-berry { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url("https://unsplash.it/1600/900?image=830"); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); }.-blue { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url("https://unsplash.it/1600/900?image=830"); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); }.-orange { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url("https://unsplash.it/1600/900?image=830"); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); }.-green { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url("https://unsplash.it/1600/900?image=830"); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830"); }.block { color: #fff; font-family: 'Fira Sans', sans-serif; margin: 0 0 200px; padding: 20% 20px; text-align: center; } h1 { font-size: 32px; font-weight: 500; } p { font-size: 14px; font-weight: 300; margin-top: 0.5em; }

 <div class="hero"> <figure> <img src="https://unsplash.it/1600/900?image=830" /><figcaption> <h1> Angled Edge </h1> <p> Image with CSS clip-path </p> </figcaption> </figure> </div> <div class="promo"> <h1> Angled Edge </h1> <p> CSS background with CSS clip-path </p> </div> <div class="quote"> <h1> Angled Edges </h1> <p> With 2 Pseudo Elements </p> </div> <div class="block -berry edge--bottom"> <h1> Bottom Angled Edge </h1> </div> <div class="block -blue edge--bottom--reverse"> <h1> Bottom Angled Edge </h1> <p> Reversed </p> </div> <div class="block -berry edge--top"> <h1> Top Angled Edge </h1> </div> <div class="block -blue edge--top--reverse"> <h1> Top Angled Edge </h1> <p> Reversed </p> </div> <div class="block -orange edge--both"> <h1> Top & Bottom Angled Edges </h1> </div> <div class="block -green edge--both--reverse"> <h1> Top & Bottom Angled Edges </h1> <p> Reversed </p> </div>

Answer 4

我希望這會有所幫助，我在:before of .shape中給出了linear-gradient

 .shape { position: relative; width: 100%; height: 290px; background-image: url(https://unsplash.it/1600/900?image=830); background-size: 100% 290px; color: #fff; }.content { display: flex; height: 100%; align-items: center; justify-content: center; }.shape:before { position: absolute; width: 100%; height: 20%; content: ""; background: linear-gradient(to right bottom, rgba(255, 255, 255, 1) 50%, transparent 50%); }

 <section class="container"> <div class="shape"> <div class="content"> Some text here </div> </div> </section>