HTML视觉差—web篇

本文探讨了如何创建视觉差效果,通过调整CSS的`background-attachment`属性为`fixed`,使背景图片在滚动时产生固定感。作者在实践中遇到两个问题:一是背景图片的宽度和高度设置,百分比无法生效,而像素单位可以;二是`background-position`属性的`auto`值无法使用。这些问题留待后续深入学习解决。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.视觉差效果图:watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQOaxn-a5lui_h-Wuog==,size_20,color_FFFFFF,t_70,g_se,x_16

 

 

 


解释:(能理解就不用看)

就是现在有两张图片,你给它放上网页中,然后给它们分别设置属性让(每张)能够覆盖整个屏幕,所以两张图片就占两个屏幕的大小,也就是需要滑动鼠标你才能看到第二张图片
现在我们想要让页面出现上图的效果:滑动的过程中上面图片由下到上逐渐被下面图片覆盖(可能说明不太清楚,动手实践下可能会清楚些)


2.正常情况下页面默认设置时background-attacthment默认属性是:scroll

想要出现视觉差,需要用到background-attacthment:fixed属性,让固定在页面。

下面是代码:watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQOaxn-a5lui_h-Wuog==,size_20,color_FFFFFF,t_70,g_se,x_16

 


在上面的代码书写中我出现的问题:

1.设置背景颜色和图片时需要先设置盒子(box)的宽度和高度,不然页面不会显示背景,这里不知道为什么设置宽度和大小不能用百分比设置,我设置50%,但是页面没有反应,但是用px设置就可以

2.我想设置背景位置background-position:后面属性用auto行不通

以上问题暂时还难以理解,后面学的知识多了再回来解决。


 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值