web前端——美化效果总结

最新推荐文章于 2024-08-09 10:42:44 发布

weixin_34008933

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量3k

点赞数 3

文章标签：前端 javascript java ViewUI

原文链接：https://segmentfault.com/a/1190000010857375

版权

本文总结了web前端开发中的一些美化效果，包括使用CSS实现图片背景全屏填充、背景图片虚化、透明效果，以及结合jQuery实现动态过渡效果，如前景淡入和背景逐渐虚化。同时介绍了CSS Sprite Generator工具，用于图片压缩和合并，以减少Web资源的存储需求。

摘要由CSDN通过智能技术生成

概述

项目开发过程中使用到了不少web前端美化效果的方法，总结一下

1 图片作为背景

要实现的效果是，任意一张图片"img-page-background.png"，不需要调整图片尺寸，图片完全填充网页背景。首先需在CSS代码中创建.page-bg类：

.page-bg {
  width: 100%;
  height: 100%;
  background: url('img-page-background.png') no-repeat;
  background-size: 100% 100%;  
}

url指定图片路径，no-repeat指定图片不平铺，background-size: 100% 100%;完全占据背景

然后在HTML代码中将背景与其他想要显示的内容分两个<div>来放置：

<!DOCTYPE html>
<html>
<head>
    ......
</head>
<body>
    ......
        <!--父容器-->
        <div class="father-div">   
            <!--放背景图片的容器--> 
            <div class="page-bg"></div>
            <!--要显示在背景图片之上的内容-->
            <div class="page-context">
                ......
            </div>
        </div>

    ......
</body>
</html>

最终效果上图，
图片描述

浏览器F12进入调试模式，将屏幕分辨率任意修改，背景图都会100%填充，但是会改变图像的纵横比
图片描述

2 背景图片虚化

刚开始学摄影的时候也很喜欢玩大光圈虚化，感觉拍出来的静物很漂亮，有一种朦胧梦幻感，而且虚实对比，突出主题，web设计中也是一样的

要实现的效果是将背景的图片虚化掉，背景之上的内容清晰显示，仍以"img-page-background.png"作为背景图片，CSS样式同“1 图片作为背景”

创建一个专用于虚化的CSS类：

.gauss {
    -webkit-filter: blur(10px); 
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);    
    filter: blur(10px);
}

因为PS中喜欢使用高斯模糊做后期，故取名gauss；-webkit-、-moz-等前缀用于对各种浏览器支持；属性的取值为blur(npx)，其中的n取值越大，模糊程度越大

在HTML代码中，同理，要把背景和实际内容分两个<div>来处理，

最低0.47元/天解锁文章

weixin_34008933

关注

3
点赞
踩
35

收藏

觉得还不错? 一键收藏
1
评论
web前端——美化效果总结

概述项目开发过程中使用到了不少web前端美化效果的方法，总结一下1 图片作为背景要实现的效果是，任意一张图片"img-page-background.png"，不需要调整图片尺寸，图片完全填充网页背景。首先需在CSS代码中创建.page-bg类：.page-bg { width: 100%; height: 100%; ...
复制链接

扫一扫