我正在使用旋转木马来显示包含某些内容的图像。为了显示图像,我正在使用剪辑路径。它在Chrome中完美展现,但在IE,Edge或Firefox中无效。
.carousel-inner>.item>a>img,
.carousel-inner>.item>img,
.img-responsive,
.thumbnail a>img,
.thumbnail>img {
display: inline-block;
max-width: 100%;
height: auto;
}
body {
background-image: url('../../Images/Plain-BG.PNG');
background-size: cover;
background-repeat: no-repeat;
font-family: Kamban !important;
}
footer {
background-image: url(../../Images/DT-Logo.png);
background-size: contain;
background-repeat: no-repeat;
background-position: right;
position: absolute;
right: 10%;
top: 85%;
width: 100%;
padding-top: 5%;
}
.news-img {
width: 42.5%;
margin-top: 13%;
clip-path: polygon(6% 4%, 94% 11%, 94% 91%, 5% 92%);
margin-left: 8.5%;
}
.title {
margin: 0px;
width: 40%;
position: absolute;
top: 43%;
height: auto;
left: 57%;
color: #fff;
word-break: break-word;
}
.carousel-inner>.item>a>img,
.carousel-inner>.item>img,
.img-responsive,
.thumbnail a>img,
.thumbnail>img {
height: auto !important;
}
.title p {
line-height: 1.7em;
font-size: 2.5em;
text-align: center;
word-break: break-word;
}
header {
background-image: url(../../Images/Mukkiya-Seithigal.png);
background-size: contain;
background-repeat: no-repeat;
background-position: right;
position: absolute;
top: 18%;
right: 4%;
width: 100%;
padding-top: 5%;
}

<div class="Maindiv">
<header></header>
<article>
<div id='carousel-container'>
<div class="carousel slide" data-ride="carousel">
<div class="wholediv carousel-inner">
</div>
</div>
</div>
</article>
<footer></footer>
</div>
&#13;
我通过脚本从Feed网址获取图片网址及其内容。所以我只通过脚本绑定详细信息。
答案 0 :(得分:8)
考虑将SVG与您的图片作为模式并将clip-path
用作points
。
<svg height="186px" width="300px">
<defs>
<pattern id="pattern" height="100%" width="100%" patternUnits="userSpaceOnUse" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
<image height="1" width="1" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Crossing_the_River_Styx.jpg/300px-Crossing_the_River_Styx.jpg" preserveAspectRatio="xMidYMid meet"></image>
</pattern>
</defs>
<polygon points="18 7, 282 20, 282 150, 15 171" fill="url(#pattern)"></polygon>
</svg>
&#13;
也可以使用一些脚本来转换&#34;动态加载的图像到SVG中。例如:
function clip() {
let img = document.querySelector('img');
let svg = document.querySelector('svg');
svg.setAttribute('height', img.clientHeight + 'px');
svg.setAttribute('width', img.clientWidth + 'px');
svg.querySelector('pattern image').setAttribute('xlink:href', img.src);
let pointsRaw = img.getAttribute('data-points').split(/,\s/);
let points = '';
for (let i = 0; i < pointsRaw.length; i++) {
let coord = pointsRaw[i].replace(/%/g, '').split(' ');
let x = img.clientWidth * coord[0] / 100;
let y = img.clientHeight * coord[1] / 100;
points += Math.round(x) + ' ' + Math.round(y) + ' ';
}
svg.querySelector('polygon').setAttribute('points', points);
img.style.display = 'none';
document.querySelector('button').style.display = 'none';
}
&#13;
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Crossing_the_River_Styx.jpg/300px-Crossing_the_River_Styx.jpg" data-points="6% 4%, 94% 11%, 94% 80%, 5% 92%">
<svg height="0" width="0">
<defs>
<pattern id="pattern" height="100%" width="100%" patternUnits="userSpaceOnUse" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
<image height="1" width="1" xlink:href="" preserveAspectRatio="xMidYMid meet"></image>
</pattern>
</defs>
<polygon fill="url(#pattern)"></polygon>
</svg>
<button onclick="clip()">Clip</button>
&#13;
答案 1 :(得分:1)
目前剪辑路径没有完整的浏览器支持。更多信息: https://caniuse.com/#search=clip-path
正如笔记中所示,支持SVG ...如果使用嵌入或对象元素。看到: https://caniuse.com/#feat=svg