前端：background背景图

background背景图

属性解释

background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：

background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺 x/y轴平铺
background-position 设置背景图片的位置 负值向上，正值向下。
background-attachment 设置背景图片是固定还是随着页面滚动条滚动 fixed不浮动、scroll、auto浮动

属性连写

实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，
比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，
这里面的
“#00ff00”是设置background-color；
“url(bgimage.gif)”是设置background-image；
“no-repeat”是设置background-repeat；
“left center”是设置background-position；
“fixed”是设置background-attachment，
各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。

雪碧图、精灵图sprite（一张大图有多个小图

通过调节背景图的位置，主要节约cpu减少请求次数，提升用户体验性

前端：background背景图相关推荐

css设置备用 background背景图
css设置备用 background背景图有时需要给容器设置一个备用背景图片比如需求:服务器上的背景图文件不一定存在,存在的话显示服务器上的图片,不存在的话则显示''备用''背景图(补位图片) ...
background 背景图
我们在开发的过程中,经常会用到各种各样的图片,长图.宽图.圆图.方图等等. 那么我们如何去设定图片的宽高,保证让图片等比例.自适应呢! 这里我们可以借助background,以背景图的形式去展示,那么 ...
解决在微信 H5 页面 background 背景图显示不出来
最近做了个项目是在微信运行H5页面,背景是加在body上的页,在微信上打开背景图一闪而过,而用手机自带的浏览器打开又是正常的,在网上查了好多方法都不行. 之前是用的是:background-size: ...
js+html2canvas实现网页放大镜效果：放大镜图片使用css样式background背景图，鼠标移动使用样式background-position动态设置
实现效果: 鼠标移动到需要放大的网页上时,鼠标静止不动500毫秒后,一个长方形的放大镜框显示,放大镜中显示当前区域2.2倍的效果,并且这时候鼠标移动放大的区域也跟着变化.放大镜限制:放大 ...
前端开发背景图 0229
背景透明背景相关背景图,背景平铺, 背景位置
vue 生产环境 background 背景图不显示原因
通常我们使用img标签引入文件,npm run build 打包后 ,因为img为html标签,打包后他的路径是由index.html开始访问的,他走static/img/'图片名'是能正确访问到图片 ...
css背景图加载太慢怎么办,CSS实现background背景图优化，快速加载图片
之前写过一篇:CSS中background属性总结整理了background 的常用属性. 日常项目中经常会用到全屏的图片, .png 和 .jpg 的图片都太大,加载缓慢. 我们可以使用webP格式 ...
vue.js 引用背景图 background 无效的3种解决办法
#vue.js项目中,出现css调用background背景图无效?如何解决? 或者调用<img>标签,也无效果? 直接上代码,自行对比查找一下: 效果图预览 1. 正确的代码,示例如下: ...
前端背景图放置_web前端入门到实战：css 中的背景图片小技巧和存在的坑
body 的背景图设置第一种 :这种情况下背景图片可以缩放但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...

前端：background背景图

前端：background背景图相关推荐

最新文章

热门文章