[英]Creating transparent svg element with background image
I am trying to implement upload container similar to this tutorial . 我正在尝试实现类似于 本教程的上传容器。 I have a svg element, which represents an icon and image as background.
我有一个svg元素,它代表图标和图像作为背景。 I don't know how to achieve this result and make svg element transparent:
我不知道如何实现此结果并使svg元素透明:
figure { width: 100px; height: 100px; border-radius: 50%; background-color: #fff; display: block; padding: 20px; margin: 0 auto 0px; position: relative; top: 50px; } svg { width: 100%; height: 100%; } .upload-image-drop { background: url('http://via.placeholder.com/200x200'); width: 200px; height: 200px; border-width: 1px; border-color: rgb(102, 102, 102); border-style: solid; border-radius: 5px; }
<div class="upload-image-drop" aria-disabled="false" style="height: 200px; border-style: none; border-radius: 0px;"> <figure> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"> <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path> </svg> </figure> </div>
It look in this tutorial he's painting the icon with this property . 看起来在本教程中,他正在使用此属性绘制图标。
fill:#fff;
so..: 所以..:
svg {
width: 100%;
height: 100%;
fill:rgb(102, 102, 102);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.