background-image属性为元素设置背景图像。
background-image属性用于为元素设置一个或多个背景图像,多个背景图像使用逗号来分隔。各个背景图像以堆叠的方式逐张放置在元素的上面。
在各个背景图像层中,第一个图像层最接近屏幕前的观察者。元素的边框会被绘制在背景图像的上面,而元素的background-color(背景颜色)则会被绘制在所有背景图像的下面。
background-image属性值模式
background-image的属性值模式就是用来给它加“特技”的。
background-image 属性会在元素的背景中设置一个图像。
根据 background-repeat 属性的值,图像可以无限平铺、沿着某个轴(x 轴或 y 轴)平铺,或者根本不平铺。
初始背景图像(原图像)根据 background-position 属性的值放置。
在书写css样式时,background属性与background-image经常用来设置背景图片,容易搞混。
background属性包含background-image属性,是在一个声明中设置所有的背景属性。
连background-image在内,background属性包含以下:
background-color 规定要使用的背景颜色。1
background-position 规定背景图像的位置。1
background-size 规定背景图片的尺寸。3
background-repeat 规定如何重复背景图像。1
background-origin 规定背景图片的定位区域。3
background-clip 规定背景的绘制区域。3
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。1
background-image 规定要使用的背景图像。1
inherit 规定应该从父元素继承 background 属性的设置。1
通常在写css的时候,一般都直接用background做全局设置,不单独去设置。
用background做全局设置时,要将所有背景属性写在一个声明中
body { background: red }
p { background: url("chess.png") 40% / 10em gray round fixed border-box}
分拆写法如下
body {
background-color: red
background-position: 0% 0%
background-size: auto
background-repeat: repeat
background-clip: border-box
background-origin: padding-box
background-attachment: scroll
background-image: none }
p {
background-color: gray
background-position: 40% 50%
background-size: 10em 10em
background-repeat: round
background-clip: border-box
background-origin: border-box
background-attachment: fixed
background-image: url(chess.png) }
background:no-repeat scroll 0px 0px / 300px 300px rgba(0, 0, 0, 0)
background-position与background-size之间 必须用 / 做分割
前面是background-position 后面是 background-size
使用vue结合两张图片即可。 我们可以将camvas当成是一张图片,当我们去渲染其中一张图片的时候,它会默认使用两个像素点的宽度去渲染,这时只需要使用vue,把两张图片之间的结合处间隔开就可以了。欢迎分享,转载请注明来源:内存溢出
评论列表(0条)