前端背景图用png和jpg

2024-11-08

【转】前端图片该保存为什么格式？png or jpg？

疑虑: 图片存储为web格式,该用什么格式保存呢?png?jpg?压缩比例该为多大?css spript的优劣?有时候我们可能会因为一张格式不正确的图片而导致设计品质的下降以及页面性能的降低.了解图片格式的特性就是为解答这些困惑从而让我们设计的产品更好.更快. 文章转载自淘宝UED,原文地址:http://ued.taobao.com/blog/2010/12/jpg_png/ 作者:平四 ====================================================

【Web前端】清除css、javascript及背景图在浏览器中的缓存

在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的下载次数,获得更好的用户体验. 然而在版本升级或做一些css.js等调整的时候,缓存导致用户无法显示更新后的样式,这是另人头头疼的问题.除非用户自行手动升级缓存,不过几乎所有用户不会为了正常访问这个网站而去手动清除缓存,因为用户根本不知道是不是缓存的问题,而归根结底,用户就是认为你的页面存在问题

吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：将页面元素所包含的文本内容替换为背景图

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"

前端学习笔记系列一：15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用

ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+alt+向下箭头,快速复制一行背景图设置: 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 用C

遭遇input与button按钮背景图失效不显示的解决办法

笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器Safari.Opera下不兼容的问题,其中IE6最为棘手,历来IE6就被诸位前端代码人员所诅咒,无奈其用户在中国大陆又非常多!可恶的微软啊,你当年造IE6的时候为何不严格遵守W3C标准呢? 今天做公司的交友网站前端网页页面的时候笔者又遇到了难解决的网页前端DIVCSS代码问题,一个平时不会发生的怪

input与button按钮背景图失效不显示的解决办法

今天做公司的某个网站前端网页页面的时候笔者又遇到了难解决的网页前端DIVCSS代码问题,一个平时不会发生的怪事情发生了:为网页代码中的Form表单中的input 和 button 按钮标签在CSS样式代码文件中设置了背景图background-image竟然失效不起作用不显示了!笔者查看了这个代码在IE.火狐等各浏览器下的浏览效果,尽管该代码在DW(DreamWeaver)中显示正常,但是在浏览器中它的背景图片确实没有出现没有显示出来,想了很多解决办法和方案,动用了很多手段,连CSSHACK都

【学习进步之路】-【浏览器兼容】透明背景图IE、360浏览器不兼容

最近在项目中遇到了浏览器兼容问题,透明背景图在IE或360兼容模式下没有效果,以前都是网上搜到结果,直接用了,并没有深入的去理解和利用,总会在下一次使用的时候忘记.为了让自己在前端方面学习更有成效,想想还是记录下来比较好,做个总结. 知识要点: CSS3的rgba()浏览器兼容 rgba()颜色值目前得到以下浏览器的支持:IE9+.Firefox3+.Chrome.Safari以及Opera10+ rgba颜色值是rgb颜色值的一个扩展,增加一个alpha,它规定了对象的透明度 rgba()颜色

img标签实现和背景图一样的显示效果——object-fit和object-positon

不知大家在做前端页面的时候,有没有遇到类似这样的问题:有一个不是正方形的图片,可能是宽度大于高度的,也可能是高度大于宽度的,而你又并不想用背景图的方式来做,要实现用img标签来让此图片显示出一个正方形的且不变形的效果.即如下图:只显示图片中间部分(红框部分) 下面我们便来简单讨论如何实现让长方形图片显示出正方形的效果,首先我们本次讨论中用到的两张图片的原图就是上面的两张图片(一张宽度大于高度,另一张高度大于宽度) 1.背景图显示正方形效果的做法首先还是从背景图的做法说起,遇到类似的问题,我们大

网页图片提取助手(支持背景图、选择dom范围)

网页图片提取助手(支持背景图.选择dom范围) 网页图片下载工具.网页图片批量保存. 使用场景: 作为web前端开发首——学习小生的你我,仿学在线页面是常有的事,但是一些在线资源,比如图片,图片有img标签中的图片,有背景图,当然还有一些旧浏览器不支持的webp,仿个页面需要 ctrl+m . ctrl+s .查看element.css ...以查找和保存所需图片. ——仿个页面我容易么我? 现在有这个小工具,希望可以助你一点点绵力. 主要应用于以下功能: 一.按需保存所选节点的所有图片可以选

前端切图相关ps技术

标签(空格分隔): 前端切图复制图层到一个新的ps文件对于单个图层 1.选中图层 2.CTRL+A全选 3.CTRL+C 4.CTRL+N新建文件,文件大小默认就可以(背景透明也在这个面板设置),新建的文件大小默认就是你当前图层的大小(比较便利) 5.CTRL+V. 针对一个以上的图层 1.按住Ctrl,鼠标点击想要的图层 2.右键选择复制图层选项弹出设置面板,文档项选择新建即可:另一种比较好用的方法是选择'转化为智能对象',然后步骤同单个图层即可完成切图方法比较笨的方法就是采用裁剪的方

CSS-自定义高度的元素背景图如何自适应以及after伪元素在ie下的处理

我都好久没更新了! 遇到一个效果,之前没有考虑清楚,设置了固定高度,到了后边,产品要加长,我就觉得设计得从新弄张长点的背景图!这不多余么? 其实分析原图还是可以再切分,再细化到不用改设计图,让我们前端页面各种适应,做到重复利用. 于是就有了这个问题和如下的一连串问题. .最外层父元素{height:auto;background:url(../images/hot_c_bg_g.png) repeat-y center top #2807b3;} 一定是y轴重复本来想用css3的backgr

Vs code背景图

写前端代码时,用过webstorm,sublime,vscode,最终还是选择了vscode,主要原因是(好看)简洁的编程环境,丰富的插件功能.不过无论是哪一个编辑器,长时间看着黑色/白色的背景难免单调. 话不多说,详情那就看步骤吧 1.安装插件这一步很简单,直接在拓展界面搜background就行. 安装完成后,重启vscode,进入User Settings用户设置,在搜索框中打background,应该就能看到这样的设置了. 2.设置配置打开设置,在搜索框中输入background,选

css背景图自适应全屏显示

前几天我在写一个前端页面的时候,需要用到全屏背景图,但是怎么写都不行(要么不全屏,要么不兼容Bootstrap的响应式布局).对,是我腊鸡后来我在网上找的时候找到一个大神写的笔记,参(照)考(抄)之后完美显示,依照大神所说还"不失真"(虽然我不管失不失真). 笔记如下: body{ margin: 0; padding: 0; font-family: sans-serif; background: url(../img/bg.jpg) no-repeat center 0px; b

vue项目中，无需打包而动态更改背景图以及标题

1.背景今天,项目经理对已完成的项目提出了一个需求,即项目的基础功能目前针对于各个基层法院都适用,而对于不同的法院,我们每次都需要前端研发来更改所属法院的法院名称以及背景图,这样对于演示者来说是非常不方便的,因此我们希望以后的项目无需经过前端研发来进行打包.更改,其他使用者自动传入背景图以及法院名称即可完成更改,从而提高各个环节的效率,对于我一个菜鸟而言,第一次进行实现,因此写这篇博客进行记录,如果出现错误或者有更好的办法,请各位小伙伴积极留言哦! 2.实现思路:我们希望在代码当中增加判断语

冒泡，setinterval，背景图的div绑定事件，匿名函数问题

1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b").click(function(){alert("b")}) $("#c1").click(function(){alert("c1")}) $("#c2").click(function(){alert("c2&q

在Excel表里面插入背景图

工作中我们会经常用到MS Excel,通常我们打开MS Excel,里面的工作表都是空白单调的背景.当然了,MS Excel可以在工作簿里面插入背景图片.那么问题来了,如果你没有安装Microsoft Office,该如何在Excel文件里面插入好看的背景图呢?下面我跟大家分享一下如何在C#中使用免费控件来实现这一功能. 在这里我使用了一个免费控件——Free Spire.XlS,有兴趣的朋友可以下载使用. 需要添加的命名空间: using Spire.Xls; using System.Dra

关于背景图相对父容器垂直居中问题 —— vertical-align 和 line-height 之间的区别

html css <div class="register-wrapper"> <div class="register"> <h1><span class="icons icons-home"></span>XXX网站首页!</h1> <div class="register-links-wrapper"> <ul class=&

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（1）设定背景图

技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点基础的CSS语法,在移动互联时代,难道我们就这样落伍了??好好学习吧,看完<CSS高效开发实战:CSS 3.LESS.SASS.Bootstrap.Foundation>,给自己的未来打气! 5.1 设定背景图的大小在CSS 3出现之前,背景图片的尺寸是由图片的实际尺寸决定的.如果同样的图片要

使用Canvas绘制背景图

原文 http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS7一致了.首页图标下方漂浮着若干大小不一的泡泡,十分梦幻.大家可以访问 beta.icloud.com 体验下,如果觉得泡泡不够多,还可以加上 crazyAwesome 参数让泡泡变得更加疯狂. 上面提到的泡泡效果,有许多种实现方案.本文要讨论的是iCloud使用的Canvas绘制背景图方案.这样做

texturepacker打包图片，场景切换时背景图有黑边

在使用TexturePacker打包图片之后,背景图在场景切换(有切换动画)时,明显能看到有黑边,在百度之后解决了. 知乎上边有网友贴出了两种解决方法,我抄过来如下: 第一种: 修改 ccConfig.h 将 #define CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL 0 改为 #define CC_FIX_ARTIFACTS_BY_STRECHING_TEXEL 1 第二种: 在AppDelegate::initInstance()方法的最后调用CCDirect

JS编写背景图切换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>背景图切换</title> <style type="text/css"> #wrap{ width: 300px;height: 225px; margin: 100px au

前端背景图用png和jpg

热门专题