nuxt.js设置背景图片

在nuxt.js中,设置背景图片的地方在index.vue文件,然后在style里面加上如下代码

body{
  height: 100%;width: 100%;
  background: url("/img/bcg.jpg") no-repeat;
  background-size:cover;
}

其中url的图片放在static目录下面,并且在引用的时候不需要加static目录;no-repeat表示图片不会重复铺满整个屏幕;cover的效果则是让图片铺满整个容器,具体可以看看这个官方解释:object-fit

CSS设置背景图不滚动

我们按照上面设置完成之后,会发现图片会随着页面的高度而滚动,图片也被拉升的不得了。

只需要添加

background-attachment:fixed 

这个样式可以和background放在一起,最终的设置应该是这样的:

body{
  height: 100%;width: 100%;
  background: url("/img/bcg.jpg") no-repeat fixed;
  background-size:cover;
}

CSS设置背景透明

加上opacity属性,后面的值是在 0--1之间,值越大透明度越小

opacity:0.4;

最后总结一下用法:

  • css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8
  • css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)
  • IE专属滤镜 filter:Alpha(opacity=x),x 的取值从 0 到 100,如filter:Alpha(opacity=80)
如果觉得我的文章对你有用,请随意赞赏