background-image 背景图片的设置

属性：background-image: url(img/banner.jpg);

1、设置背景图的宽度

background-size: 400px;

2、设置背景图的宽度

百分比，以父元素的百分比来设置背景图的宽度和高度，第一个值为宽度，第二值为高度，一般不设置高度，会变形

background-size: 50%;只显示50%的宽度
background-size: 100%;只显示100%的宽度
background-size: 100% 80%;只显示100%的宽度

3、设置背景图的宽度

背景图完全覆盖背景区域，某些部分也许无法显示在背景区域内

background-size: cover;

4、设置背景图的宽度

以显示完整图片为主，使其高度与宽度完全适应内容区域背景图。注：但是也会留下空间没有图片。

background-size: contain;

注：这个属性设置背景图的显示是最好的

5、设置背景图不重复

background-repeat：no-repeat;

}

转载于:https://www.cnblogs.com/hlrblog/p/7868512.html

background-image 背景图片的设置相关推荐

uni-app 背景图片动态设置
uni-app 背景图片动态设置 <view :style="{backgroundImage:`url(${background})`}"></view> ...
vscode 背景图片的设置
1 安装background扩展 1.1 操作流程文件-> 首选项 -> 扩展 -> 输入background 点击安装 1.2 选择最左侧工具栏选择扩展输入background ...
pycharm背景图片的设置
以下为pycharm2018的显示,2019版本稍有不同在使用pycharm的时候千篇一律的黑洞洞的背景窗口是不是很影响体验,时间长了眼睛还不舒服. So,改变来了我们今天来共享一下设置pycha ...
html网页左侧背景,CSS设置html网页背景图片 CSS设置网页背景颜色
CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技巧为主,希望对DIV CSS爱好者有帮助.通常对网页设置背景直接对body设置背景 ...
CSS设置html网页背景图片 CSS设置网页背景颜色
http://www.divcss5.com/jiqiao/j768.shtml CSS设置网页背景图片 CSS设置网页背景颜色技术教程篇本篇DIVCSS5以布局思想介绍使用CSS设置实现网页背景技 ...
Fulutter 设置圆角背景图片Container 设置边框、圆角、阴影
Fulutter 设置圆角背景图片&Container 设置边框.圆角.阴影在 Flutter 中,如何实现背景图片呢?又如何实现带圆角的背景图片呢? Fulutter 设置圆角背景图片使 ...
QT设置背景图片以及设置按钮
1.Qt设置背景图片 ①.设置UI窗口背景图片,需要在构造函数中添加以下代码: this-> setAutoFillBackground(true); QPa ...
PPT背景图片怎么设置？4个详细教程在这！
案例:PPT背景图片怎么设置? [因为论文答辩,最近需要制作PPT,昨晚之后感觉有点单调,我想设置一个背景图片,让我的PPT看起来更有风格,请问大家是怎么设置PPT背景图片的呢?] PPT背景图片是P ...
win10系统自定义日历应用背景图片怎么设置
Win10系统与win7系统的差别还是非常大的,比如win10系统的正式版,自带了功能强大的日历应用,不足之处就是日历应用的背景默认的都是一张图片,如果想特立独行换一个自己喜欢的背景图片也是可以的.下 ...
MFC对话框背景图片的设置
MFC对话框背景图片的设置 1.插入一个Bitmap的资源图片,假设资源名称为:IDC_BITMAP1(一般默认的第一个BMP文件是它,接下来的为IDC_BITMAP2,以此类推) 2.在CXXXDi ...

background-image 背景图片的设置

background-image 背景图片的设置相关推荐

最新文章

热门文章