问题
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.
回答1:
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.
来源：https://stackoverflow.com/questions/32712881/using-css-shape-to-click-being-an-image