以下是一个解决方法的代码示例:
Image Wrapper Example
This is some text over the image.
在这个示例中,我们使用了一个div
元素来包装图像和文本。.image-wrapper
类设置了相对定位,并且图像的亮度过滤器设置为100%。文本的不透明度设置为1。
使用:hover
伪类选择器,我们通过将图像的亮度过滤器设置为70%来在悬停时更改图像的亮度,并将文本的不透明度设置为0.7来在悬停时更改文本的不透明度。
通过这种方式,我们可以在图像上更改亮度过滤器,而在文本上更改不透明度过滤器,而不会相互干扰。