使用CSS形状点击图像？ [英] Using css shape to click being an image?

问题描述

我试图获得输入字段和按钮，即使它们在一个成形的png图像后面也能工作。

现在我想我只需要做正在使用形状，它会追踪形状。按钮或输入字段是可编辑/可点击的。

.element {
float：left;
height：150px;
width：1300px;
shape-outside：img（'path / to / red-image-with-shape.png'）;
}

ps：this情况是用户向上滚动时的屏幕截图。设计师希望表单元素即使在这些滚动情况下也是可访问的。 设置指针事件：none 赋给具有形状的元素。据我所知，没有其他解决方案。
也许你可以尝试使输入栏透明并改变z-index。但那不会是你想要的。顺便说一下，隐藏输入字段的内容并不方便用户使用。

I am trying to get an input field and button to work even when they are behind a shaped png image.

Now i thought all i had to do was using shape and it would trace the shape. And the button or input field would be editable/clickable

.element { float: left; height: 150px; width: 1300px; shape-outside: img('path/to/red-image-with-shape.png'); }

ps: this situation is a screenshot when an user scrolls upwards. The designer wants the form elements to be accessible even with these scrolling situation.

解决方案

Set pointer-events: none to the element with the shape. As far as I know there is no other solution. Maybe you could try to make input field transparent and change the z-index. But that would not be what you want. By the way it is not user-friendly to hide the content of the input field.

这篇关于使用CSS形状点击图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！