Click here for work in progress
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中的链接，看看它的外观。
答案 0 :(得分：0)
所以我在这里回答我自己的问题。 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>
我们使用图像模式显示图像并从中剪切圆圈。然后将其用于＆＃34; cut＆＃34;在顶部分层的实心矩形之外。
希望这将有助于将来。
答案 1 :(得分：-1)
“filter：”在IE-9中无效，您尝试删除“过滤器”