当前位置:首页 > Web开发 > 正文

因此需要一张较大的背景图片来解决上面的问题

2024-03-31 Web开发

标签:

同一个标签可以同时设置配景颜色和配景图片,如果颜色和图片同时存在,那么图片会笼罩颜色。

1.在CSS中有一个叫做background-position:属性,就是专门用来控制配景图片的位置

2.格局:background-position:值1 值2;

值1的取值范畴:left center right

值1代表配景图片的程度位置

值2的取值范畴:top center bottom

值2代表配景图片的垂直位置

值1和值2也可以设置像素值,,来分袂暗示距离最左边和最上边的像素值(注意可以接受负值,也就是左上角就是坐标的原点,图片的左上角就是坐标值的巨细),记住必然要带单位。默认值为:left top

例子:

<style> .box{ height: 1000px; width: 1000px; background-image: url("image/snow.jpg"); background-repeat: no-repeat; background-position: center center; } </style> <div> </div> 专门成立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习要领和需要注意的小细节,互订交流学习,不竭更新最新的教程和学习技巧(从零根本开始到WEB前端项目实战教程,学习工具,全栈开发学习路线以及规划)

3.使用方法:

我们使用配景图片,而不是使用img标签,这是因为,当我们使用img标签的时候,如果图片很大那么下面就会有滚动条,但是这种网页是很垃圾的,因为展示出来首页,就是让大家看的,加一个滚动条很不舒服。那我们用小图片不就得了,这其实也不行,因为我们每小我私家的屏幕辨别率巨细都差别,因此需要一张较大的配景图片来解决上面的问题。

web前端入门到实战:Css配景定位

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/31456.html