CSS裁剪和分层

Question

单击此处查看正在进行的

body {
  background: white;
}
.cutout {
  height: 30em;
  margin-top: -100px;
  padding-top: 100px;
  position: relative;
}
.cutout.top {
  margin-top: 0;
  padding-top: 20px;
}
.cutout.last {
  background: green;
}
.cutout.red {
  backround: red;
  background: radial-gradient(ellipse 200px 150px at 50% 100%, transparent 75px, #ff0000 50px);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#00000000', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  z-index: 10;
}
.cutout.white {
  background: white;
  background: radial-gradient(ellipse 200px 150px at 50% 100%, transparent 75px, #ffffff 50px);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#00000000', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  z-index: 9;
}
.cutout.image {
  background: radial-gradient(ellipse 200px 150px at 50% 100%, transparent 100px, rgba(255, 255, 255, 0) 50px), url('http://www.theholistichorses.com/wp-content/uploads/2014/02/img_10.jpg');
  z-index: 8;
}
.cutout.image:after {
  content: "";
  color: blue;
  width: 74px;
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 10;
}
.cutout.blue {
  background: blue;
  background: radial-gradient(ellipse 200px 150px at 50% 100%, transparent 75px, #0000ff 50px);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#00000000', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  z-index: 8;
}
.cutout.green {
  background: green;
  background: radial-gradient(ellipse 200px 150px at 50% 100%, transparent 75px, #008000 50px);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#00000000', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  z-index: 6;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->
<div class="cutout top red">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1>Strippy Strippy</h1>
        <p>Cum primis habemus salutandi eu, his ad saperet abhorreant, hinc fugit consul eam ad. Sea quodsi invenire an, nihil repudiare vis at. Mei paulo efficiendi liberavisse id. Id vix omnes definiebas, ei pro option contentiones. Delenit scripserit cu mea, modus nonumy mediocritatem ad eos. Et diam altera fabellas duo, nullam alterum conceptam ut mei.</p>
      </div>
    </div>
  </div>
</div>
<div class="cutout white">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1>Strippy Strippy</h1>
        <p>Cum primis habemus salutandi eu, his ad saperet abhorreant, hinc fugit consul eam ad. Sea quodsi invenire an, nihil repudiare vis at. Mei paulo efficiendi liberavisse id. Id vix omnes definiebas, ei pro option contentiones. Delenit scripserit cu mea, modus nonumy mediocritatem ad eos. Et diam altera fabellas duo, nullam alterum conceptam ut mei.</p>
      </div>
    </div>
  </div>
</div>
<div class="cutout image">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1>Strippy Strippy</h1>
        <p>Cum primis habemus salutandi eu, his ad saperet abhorreant, hinc fugit consul eam ad. Sea quodsi invenire an, nihil repudiare vis at. Mei paulo efficiendi liberavisse id. Id vix omnes definiebas, ei pro option contentiones. Delenit scripserit cu mea, modus nonumy mediocritatem ad eos. Et diam altera fabellas duo, nullam alterum conceptam ut mei.</p>
      </div>
    </div>
  </div>
</div>
<div class="cutout blue">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1>Strippy Strippy</h1>
        <p>Cum primis habemus salutandi eu, his ad saperet abhorreant, hinc fugit consul eam ad. Sea quodsi invenire an, nihil repudiare vis at. Mei paulo efficiendi liberavisse id. Id vix omnes definiebas, ei pro option contentiones. Delenit scripserit cu mea, modus nonumy mediocritatem ad eos. Et diam altera fabellas duo, nullam alterum conceptam ut mei.</p>
      </div>
    </div>
  </div>
</div>
<div class="cutout green last">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1>Strippy Strippy</h1>
        <p>Cum primis habemus salutandi eu, his ad saperet abhorreant, hinc fugit consul eam ad. Sea quodsi invenire an, nihil repudiare vis at. Mei paulo efficiendi liberavisse id. Id vix omnes definiebas, ei pro option contentiones. Delenit scripserit cu mea, modus nonumy mediocritatem ad eos. Et diam altera fabellas duo, nullam alterum conceptam ut mei.</p>
      </div>
    </div>
  </div>
</div>

所以，我有这样的布局，我正试图为我正在开发的网站拼凑。我已经（我认为）做得很好了，但我有点拘泥于IE9梯度。

我使用渐变来获得圆形标签效果，径向渐变被用作剪切。标记需要显示为属于div的顶部，并且具有相同的背景。问题在于图像。我已经从顶部div中剪切出了形状（稍后我会在知道这是否可行后，对图像下方的形状进行排序），但在IE9中无法使其看起来正确。

有人知道这是否可能吗？我试过Colourzilla和他们的后备（只在蓝色的），但它是对的。

我的问题是，这在IE9中可行吗？

查看Chrome/Safari中的链接，了解它的外观。

Answer 1

所以我将在这里回答我自己的问题。SVG就是答案。

<svg class="svg-graphic" width="100%" height="470" preserveAspectRatio="xMinYMin slice" view-box="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
            <g>
                <mask id="hex-mask">
                    <rect width="100%" height="40" x="0" y="0" fill="white"></rect>
                </mask>
                <clipPath id="hex-mask1">
                    <circle r="40" cx="50%" cy="40" fill="blachedalmond"></circle>
                </clipPath>
                <pattern patternUnits="userSpaceOnUse" id="rogerMoreAbout" width="100%" height="100%">
                    <image preserveAspectRatio="xMinYMin slice" width="100%" height="100%" xlink:href="/.imaging/Desktop/dam/6747e9e0-4e1f-48ef-9b9d-1c625f14e1ca.jpg"></image>
                </pattern>
            </g>
            <rect width="100%" height="100%" fill="url(#rogerMoreAbout)"></rect>
            <rect width="100%" height="40" fill="white" mask="url(#hex-mask)"></rect>
            <rect width="100%" height="100%" clip-path="url(#hex-mask1)" fill="url(#rogerMoreAbout)"></rect>
        </svg>

我们使用了一个图像模式来显示图像并从中剪切出圆圈。然后，它被用来"剪切"顶部的实心矩形。

希望这对将来的某个人有所帮助。

Answer 2

"filter:"在IE-9中不起作用，您尝试删除"filter"