HTML   发布时间:2022-04-14  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何在HTML中制作晕影效果?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在寻找一个很好的解决方案,如何为网站制作 vignette effect.角落应该比页面的背景颜色更暗,就像径向渐变一样.

到目前为止我尝试了不同的方法

> 4个DIV设置为位置:绝对,顶部/底部:0px,左/右:0px,每个都有一个图像(图像块链接.一般情况不好?)
>与上面相同但是div的固定高度/宽度和背景图像而不是图像(仍然阻挡链接?!)
> CSS3多个背景.两个在左上/右上方的身体和底部的额外div高度:300; margin-top:-300px总是显示在底部(糟糕的浏览器支持)
>身体上的CSS3径向渐变(只要你滚动你松开背景.一个额外的div可以解决这个问题.再次糟糕的浏览器支持)

关于浏览器支持:
该解决方案必须适用于最新版本的firefox,chrome,IE以及可能的歌剧和Safari(按重要性排序).这是绝对最低限度.但它也应该适用于旧版浏览器.如果可能的话,Firefox 3.6和IE 8甚至7.我对chromes版本的历史知之甚少,但看起来chrome用户几乎都是最新的,所以放弃对chrome 15及更低版本的支持并不是什么大问题?!是否有任何重大变化可以使某些东西在chrome 17中起作用,但不是例如15?

CSS3径向渐变在我看来是最好看的解决方案,但我担心很多用户不支持它,因为他们的旧浏览器.使用4 DIV解决方案我遇到了无法点击的链接问题,因为图像会阻止它.我试着搞乱z-index,但这不起作用.我给了DIVs z-index:1和#container(其中放置了所有内容)的z-index为10.应该不行吗? z-index是否会影响链接?

所以你们认为,这将是一个很好的解决方案?我在这里显然需要一些帮助.谢谢!

解决方法

你可以使用内部阴影
box-shadow: inset 0 0 100px #000;

演示:http://jsfiddle.net/ACPUP/

它在IE7 / 8中不起作用.旧版本的Firefox,Chrome,Safari或Opera可能需要它们的前缀:-webkit-box-shadow,-moz-box-shadow或-o-box-shadow.

您还可以堆叠这些阴影以获得更加生动的效果,但我不知道旧版本的浏览器是否支持这种效果.

box-shadow: inset 0 0 120px #000,inset 0 0 80px #000,inset 0 0 40px #000;

大佬总结

以上是大佬教程为你收集整理的如何在HTML中制作晕影效果?全部内容,希望文章能够帮你解决如何在HTML中制作晕影效果?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。