参见英文答案 >
Creating a hole in a <div> element 9个
我有一个< div>它有木材重复的背景图像.
我有一个< div>它有木材重复的背景图像.
我现在想在这个窗口切一个洞.有没有办法在HTML和CSS中做到这一点?欢迎Javascript.
请参阅jsFiddle上的此示例
解决方法
这很简单 – 使用< svg>中的路径绘制门.元件.
<svg xmlns="http://www.w3.org/2000/svg" id="svg-door"> <defs> <pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768"> <image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768" /> </pattern> </defs> <path xmlns="http://www.w3.org/2000/svg" d=" M0,0 225,300 0,300 z M165,10,215,10 215,80 165,80 z " fill="url(#wood)" fill-rule="evenodd"/> </svg>
CSS:
#svg-door { background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg); background-size: cover; Box-sizing: border-Box; padding: 100px; width: 100%; height: 500px; }
这种方法的优点是你的背景可以是任何东西,窗口是一个真正的窗口(透视).
我已经预先计算了你的路径,你可以在我用你的小提琴创建的前叉中找到新门 – http://jsfiddle.net/teddyrised/qS4G7/
[编辑]为了完整起见,我还使用木质纹理作为svg路径的背景图像.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。