1、背景图片尺寸小于容器尺寸 1 通过background的center属性实现背景图片居中。把CSS背景图片background-image的url()、no-repeat和center center写在一起。注意两个center分别代表背景图片水平方向居中和垂直方向居中。2 通过background-position-x和background-position-y实现背景图片居中。分别给background-position-x和b...
background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80'); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; -webkit-back...
background-color:设置元素的背景颜色。 background-image:把图像设置为背景。 background-position:设置背景图像的起始位置。属性可以是百分比:%;单位:px;也可以是left/right/center/bottom/top这几个属性值可以两两组合使用,如果只规定了一个关键词,那么第二个值将时"center"。 center--居中。 position方位:是从 ...
body{/*加载背景图*/background-image:url(images/bg.jpg);/*背景图垂直、水平均居中*/background-position:center center;/*背景图不平铺*/background-repeat:no-repeat;/*当内容高度大于图片高度时,背景图像的位置相对于viewport固定*/background-attachment:fixed;/*让背景图基于容器大小伸缩*/background-size:...
background-image: url(./ecLogo.jpg); 1. 2. 【实战】背景图片自适应全屏 【实战】响应式巨幅背景大标题 背景渐变 背景定位 background-position 初始值为0% 0%,其等同于left top。 属性值为1个值时 另一个值为center 属性值为2个值时 若2个值都是关键字属性值。left关键字和right关键字表示水平方向,...
浏览器显示效果如下图所示。从浏览器显示效果可以看出，background-position属性值设置为right center时，图片从元素的右侧和中间开始填充元素背景。background-position的属性值设置为百分比时，需要设置两个值（x% y%），第一个x%是水平位置，第二个y%是纵向位置。从元素的左上角开始，左上角是0％ 0％。右下角...
background-image:inherit;background-repeat:no-repeat;background-position:center;}.un-image-wrapper{width:100px;height:70px;}.wrapper1{background-color:#adad12;position:relative;border:2px solid black;}.wrapper2{position:absolute;width:200px;height:140px;/*background-color: inherit;*/border:2...
④background-position: 用于控制背景图片的位置。background-position有5个关键字值分别是:top,left,bottom,right,center。 可以通过任意两个关键字组合来定位。也可以通过百分比来定位。 也可以通过像素大小进行定位。例如:background-position:50% 50%.第一个百分比对应横坐标,第二个百分比对应纵坐标。
使用background-image属性时,可以同时设置background-repeat、background-position、background-size等属性来控制背景图片的重复、位置和尺寸。 例如,可以通过以下代码将一个背景图片应用到元素上: .element { background-image: url('image.jpg'); background-repeat: no-repeat; background-position: center; backgro...
body {background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg), url(https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80);background-position: center, top;background-repeat: repeat, no-repeat;background-size: con...