logo标签列表

如何创建一个带有背景图片的倾斜透明形状？

htmlcss
6
我希望实现类似于这样的效果 - slanted div 它有一个背景图片。我只能制作出像这样的斜角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>

但是如何在有背景图的情况下使它透明呢？请问谁能帮忙一下。

1
最终，Eventually clip-path will be an option，但由于IE/Edge不支持它，您需要使用其他解决方案。我最近在一个项目中使用的解决方案涉及在矩形背景颜色和图像上覆盖一个白色三角形的:before节点，但这也带来了自己的一系列权衡。 - zzzzBov
4个回答
5

我尝试了这个例子，希望它能对你有所帮助。只需复制整个代码到一个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>

我还想在图像上加一个透明的颜色！ - Azizul
0
这是我的修订版本（简化版）。 

<!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>

0

我尝试了一个新的，请看一下，如果你不同意可以忽略我。

.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>

0

希望这能有所帮助，我在:before中的.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>

如果您可以使用“clip-path”（不支持IE，Edge），那么这是我的fiddle链接：https://jsfiddle.net/11qrp5xk/。 - Supraja Ganji
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接