-
2021-06-09 05:23:49
刚开始设置背景图片的时候,能铺满页面,但是没有全部把页面展现出来,经过一番查资料,才搞明白。如下:
background: url(../../../assets/login/login-background.jpg) no-repeat center 0px;
background-position: center 0;
background-size: cover;
设置这三个属性就可以达到你想要的效果,其实background属性是包括下面两个属性的,如果background属性里面没有设置的话就加上,设置了话就不用了。
如果图标高度有问题,加上下面这个:
min-height: 100vh;
详解:
url(../../../assets/login/login-background.jpg) —— 图片路径的位置
no-repeat —— 图片不重复
center 0px —— center是距离页面左边的定位,0px是距离页面上面的定位
background-position: center 0 —— 就是图片的定位,同上
background-size: cover; —— 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
min-height: 100vh; —— 视窗的高度,“视区”所指为浏览器内部的可视区域大小,即window.innerWidth/ window.innerHeight大小
更多相关内容 -
Java怎么添加背景图片
2021-03-05 21:36:34如何在使用itext生成pdf文档时给文档添加背景图片 这个问题我在网上搜了很久,没有找到什么解决方案,需求其实很简单,就是添加背景图片.在解决这个问题之前,我们需要了解什么是背景图片?背景图片就是位于文档最底层的...首先,导入相关的包:
import java.awt.BorderLayout;
import java.awt.Container;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
也可以用:
import java.awt.*;
import javax.swing.*;
接着,创建一个Java窗体对象,并设置为可见
eg: JFram frame = JFrame();//创建一个窗体
frame.setVisible(true);//设置窗体可见,默认不可见
最后编写如下代码:
/*
* 以下7行是给窗体添加背景图片
*/
ImageIcon img = new ImageIcon("E:\\1"+ ".gif");//这是背景图片
JLabel imgLabel = new JLabel(img);//将背景图放在标签里。
frame.getLayeredPane().add(imgLabel, new Integer(Integer.MIN_VALUE));//注意这里是关键,将背景标签添加到jfram的LayeredPane面板里。
imgLabel.setBounds(0,0,img.getIconWidth(), img.getIconHeight());//设置背景标签的位置
Container cp=frame.getContentPane();
cp.setLayout(new BorderLayout());
((JPanel)cp).setOpaque(false); //注意这里,将内容面板设为透明。这样LayeredPane面板中的背景才能显示出来。
赶快编写一个试试吧!!!
完整代码如下:
package 第八章;
import java.awt.BorderLayout;
import java.awt.Container;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
public class MyFirstFrame extends JFrame {
/**
* 作者:听山谷的~
* 版本1.0
*/ private static final long serialVersionUID = 1L;
public static void main(String[] args) {
// TODO Auto-generated method stub
MyFirstFrame frame=new MyFirstFrame();
frame.setVisible(true);//设置窗体可见,默认不可见
/*
* 以下7行是给窗体添加背景图片
*/
ImageIcon img = new ImageIcon("E:\\1.gif");//这是背景图片
JLabel imgLabel = new JLabel(img);//将背景图放在标签里。
frame.getLayeredPane().add(imgLabel, new Integer(Integer.MIN_VALUE));//注意这里是关键,将背景标签添加到jfram的LayeredPane面板里。 imgLabel.setBounds(0,0,img.getIconWidth(), img.getIconHeight());//设置背景标签的位置
Container cp=frame.getContentPane();
cp.setLayout(new BorderLayout());
((JPanel)cp).setOpaque(false); //注意这里,将内容面板设为透明。这样LayeredPane面板中的背景才能显示出来。
}
public MyFirstFrame(){
super(); //继承父类构造方法 setTitle("利用JFrame类创建的窗体");
setBounds(100,100,315,320); //设置窗体显示位置及大小
System.out.println(getForeground());
getContentPane().setLayout(null);//设置为不采用任何布局管理器
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); }
}
GUI的优化操作/添加背景图片等
一.背景图片的添加这是JAVA中添加背景图片的方式,基本思路先建立一个Label标签,然后建立一个层次的布局,将label标签添加到最下面去. ImageIcon image=new ImageIco ...
java添加背景图片
总结:我们通常实现添加背景图片很容易,但是再添加按钮组件就会覆盖图片.原因是: 有先后啊.setlayout();与布局有很大关系 请调试代码的时候,仔细揣摩.我晕了 还可以添加文本框,密码框 fra ...
netbeans中给jpanl添加背景图片制定代码的理解——匿名内部类继承父类
此测试是为了仿照在netbeans中给jpanl添加背景图片的制定代码的执行过程 在JpDemo中定义了个Car类的数据类型,但在给其赋值对象时使用了匿名内部类,继承了Car类,是其子类,并重写了父类 ...
swing-窗体添加背景图片的2种方法
在美化程序时,常常需要在窗体上添加背景图片.通过搜索和测试,发现了2种有效方式.下面分别介绍.1.利用JLabel加载图片利用JLabel自带的setIcon(Icon icon)加载icon,并设置 ...
如何在使用itext生成pdf文档时给文档添加背景图片
这个问题我在网上搜了很久,没有找到什么解决方案,需求其实很简单,就是添加背景图片.在解决这个问题之前,我们需要了解什么是背景图片?背景图片就是位于文档最底层的图片,文字和其他内容可以浮在它的上面.这又 ...
C#(winform)为button添加背景图片
1.既然是添加背景图片 所以这里应该使用 Button.BackgroudImage = "" ;来设置图片 而不应该使用 Button.Image = "" ...
iOS 中 为UIView添加背景图片
创建UIImage的方法有两种: UIImage *image = [UIImageimageNamed:@"image.jpg"];//这种不释放内存,要缓存 NSString ...
[BS-29] 给UIView添加背景图片
给UIView添加背景图片 //默认情况下只能设置UIView的背景颜色,不能给UIView设置背景图片,但通过绘图知识可以做到 - (void)drawRect:(CGRect)rect { [su ...
IOS学习之路十五(UIView 添加背景图片以及加边框)
怎样给UIview添加背景图片呢很简单,就是先给view添加一个subview,然后设为背景图片: 效果图如下: 很简单直接上代码: //设置内容 self.myTopView.backgroundC ...
随机推荐
ASP.NET Core中间件(Middleware)实现WCF SOAP服务端解析
ASP.NET Core中间件(Middleware)进阶学习实现SOAP 解析. 本篇将介绍实现ASP.NET Core SOAP服务端解析,而不是ASP.NET Core整个WCF host. 因 ...
Spring远程调用技术<;2>;-Hessian和Burlap
上篇谈到RMI技术,加上Spring的封装,用起来很方便,但也有一些限制 这里的Hessian和Burlap解决了上篇提到的限制,因为他们是基于http的轻量级远程服务. Hessian,和RMI一样 ...
Android tween 动画 XML 梳理
前言: Tween动画是展现出旋转.渐变.移动.缩放的这么一种转换过程,即补间动画.Tween动画有两种定义方式:XML形式,编码形式.这次主要来梳理XML的方式配置动画 (1)XML定义动画,按照动 ...
thread.join 从异步执行变成同步
Java的线程模型为我们提供了更好的解决方案,这就是join方法.在前面已经讨论过,join的功能就是使用线程 从异步执行变成同步执行 当线程变成同步执行后,就和从普通的方法中得到返回数据没有什么区别 ...
sql脚本多服务器操作
--创建链接服务器exec sp_addlinkedserver 'srv_lnk','','SQLOLEDB','IP' exec sp_addlinkedsrvlogin 'srv_lnk','f ...
JavaScript一些函数
1.prompt()函数:有两个参数,一个是显示用户输入框上面的标签,另一个是输入框的初始值.用来接收用户输入的值,然后把它返回到代码中: 例如:
java的nio之:java的nio系列教程之pipe
Java NIO 管道是2个线程之间的单向数据连接.Pipe有一个source通道和一个sink通道.数据会被写到sink通道,从source通道读取. 这里是Pipe原理的图示:
apache开源项目 -- Tuscany
tuscany是Apache组织关于SOA实现的一个开放源码的工程项目,目前处于孵化期阶段. 该项目主要基于SCA,SDO,DAS等技术上实现的. SCA 的基本概念以及 SCA 规范的具体内容并不在 ...
HTML&;CSS基础学习笔记1.12—引入样式表
引入样式表 我么都知道HTML是网页内容的载体,CSS样式是表现,就像网页的外衣.如何让网页披上这层外衣呢? 这个时候就需要用标签了,它起到将CSS样式链入页面的作用. < ...
JavaScript单线程和异步机制
随着对JavaScript学习的深入和实践经验的积累,一些原理和底层的东西也开始逐渐了解.早先也看过一些关于js单线程和事件循环的文章,不过当时看的似懂非懂,只留了一个大概的印象:浏览器中的js程序时 ...
-
HTML背景图片
2022-03-07 21:23:20在我们日常的生活中,经常会见到一些网页背景是一张图片,那么怎么设置出这种效果呢,小编就带着大家一起来学习一下。 首先大家需要料及一个属性:background-image ,通过这个属性来设置背景图片。用url来引入图片...在我们日常的生活中,经常会见到一些网页背景是一张图片,那么怎么设置出这种效果呢,小编就带着大家一起来学习一下。
首先大家需要料及一个属性:background-image ,通过这个属性来设置背景图片。用url来引入图片位置
background-image: url(F2581BA79A437DCC9807D1311783E298.jpg);
然后我们引入图片之后,来了解一下如何设置你引入的图片
1,background--repeat 这个属性是用来设置图片的显示方式
repeat,图片重复
repeat- X,
图片横向重复
repeat-y,图片纵向重复
no-repeat,图片不重复如果你的图片尺寸过小,就会重复显示,这个时候我们就需要通过"background--repeat"这个属性来设置。
2,background-position 用来设置图片的显示位置
(1)可以使用坐标表示图片位置如:background-position:30px 30px;
(2)可以使用单词表示如:background-position:left top;图片就在左上角显示。同理,同样适用与其他四个方位。
(3)还可以用百分比来显示图片的位置如:background-position:50% 50%。注意:百分比指的是容器的百分比。
3,background-size用来设置图片的大小
(1)background-size:cover:把背景图像扩展至足够大,以使背景图像铺满背景区域。(可能会裁剪图片)
(2)background-size:contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。(可能会出现空白)
4,background-origin 用来设置背景图片的渲染位置
背景图片可以分别从内容区域、内边距的padding位置、border位置进行渲染
5,background-attachment 用来设置背景图片是否固定或随着页面进行滚动
(1)background-attachment:fixed(背景图片固定不动)| scroll(默认随页面滚动)
6,既然这些值都是对背景图片进行设置,那么我们就可以通过简写的方法来缩短我们的时间
background : bg-color值|bg-image值bg-repeat值bg-position值 / bg-size值bg-attachment值;
注意:简写没有先后顺序,但是图片的位置和大小之间必须用"/"隔开
好了,今天就先学到这里,后面会继续更新,谢谢大家的支持。
-
怎么让div的大小随着背景图片的大小变大
2021-06-16 04:37:35在做网页的时候,经常会遇到为div添加背景图片,那么我们应该怎样做才能让div的大小随着背景图片的变大而变大呢,也就是让我们的div被背景图片所撑起来。下面学习啦小编告诉你!让div的大小随着背景图片的大小变大的...在做网页的时候,经常会遇到为div添加背景图片,那么我们应该怎样做才能让div的大小随着背景图片的变大而变大呢,也就是让我们的div被背景图片所撑起来。下面学习啦小编告诉你!
让div的大小随着背景图片的大小变大的方法
首先,我们需要新建一个html页面,并在页面中写上一个div。并为div添加背景图片,为背景图片添加一些基本的样式。
然后,我们按下键盘上的F12,查看其在浏览器中的效果。效果肯定是页面中没有相应的背景图片,理由是我们做的是背景图片,无法将div撑起一定的高度。
既然不能撑起来,我们也不能单纯的为div设置高度,这样无法解决不同大小背景图片的问题,我们可以利用css中的伪元素::after或者::before
可以简单的解释一下,利用伪元素是将指定标签的前面或者后面的内容设为空,并设成块元素,并设定以百分比为单位的padding-bottom或者padding-top。以此撑开这个div。
另一种方法是,我们在有背景图片的div的内部再套一个div,然后为这个内部的div添加相应的样式,使得外层div可以被撑起来。
这里我采用的是和第一个相同的做法,为这个内部div设定内部边距上或者下都可以。同样是以百分比作为单位。这样我们再次在浏览器中查看,就可以看到作为背景的图片了。
最后告诉大家一些注意事项,不管我们采用方法一还是方法二,都是设置的上下的内边距而不是外边距,并且要以百分比作为单位。
看了“怎么让div的大小随着背景图片的大小变大”的人还看了
-
C++之设置背景图片(Easyx)
2021-05-25 04:05:19C++之设置背景图片(Easyx)#include#includeint main() {initgraph(600, 600);//创建一个窗口IMAGE background;//定义一个图片名.loadimage(&background,"resources\\background.jpg",600,600,1);//从图片文件... -
css如何设置背景图片?background属性添加背景图片
2021-02-05 06:39:00在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片。...css background属性就是专门设置背景的属性,可以设置背景色,也可以设置背景图片。下面看看background可以设置的属性:background-... -
背景图片全屏(背景图片没有撑满屏幕)
2017-09-29 15:33:00http://blog.csdn.net/u014374031/article/details/69258208 -
CSS背景图片和HTML中的img标签
2021-06-12 02:23:15背景图片:该图片是218*170 css内容:div{width: 100px;height: 100px;background: url(img/1.jpg);border: 2px solid red;} div{width: 500px;height: 500px;background: url(img/1.jpg);border: 2px solid red;} ... -
如何给文字添加背景图?给文字填充图片背景色的操作方法
2021-06-13 04:09:12下了两天的雨,今天终于放晴了,而且还是阴天的天气,有微风,没有热辣的太阳,这让小编不禁感到了一股秋的凉意呢~啊哈哈哈,好啦,还是不说废话了,来看看今天的教程方案吧!平时我们制作纯文字的图片画面,文字的... -
在html网页中如何设置背景图片?网页背景怎么设置?
2021-06-16 06:01:24不知道大家有没有发现,当我们在浏览部分网页的时候网页的背景都是很漂亮的。那么今天小编来教大家怎么在 html 网页中设置背景图片吧!1.首先还是老样子,我们在开发工具中新建一个 .html 文件,然后再文件中自己... -
CSS设置背景图片不显示的解决方法
2021-06-13 08:41:37在建立新的内容模型的时候,需要修改前台的文章页面的排版,为了使页面各个部分的显示效果一致,希望增加的部分的标题的背景图片与其他版块的背景相同。为了方便,于是就直接从原有的CSS文件中把代码复制过来了,... -
div background css设置div背景图片
2021-06-09 04:18:10CSS5对DIV盒子配置后台图片,如何显现后盾图片,程度平铺图片、纵向平铺图片、无量平铺图片、定位后台图片等手腕机关教程一、配景基本语法1、CSS单词:要对任何对象设置靠山使用bac千克round花式单词。2、CSS配景... -
css中背景图片显示不出来
2021-06-12 09:44:44css中背景图片显示不出来css添加背景图片无法显示,有以下几方面原因:1、css没有被调用;请检查css调用是否成功。2、css图片地址不对;请检查css图片地址是否正确。3、div的高度没有固定,是auto或者没有设值;div... -
html设置表格背景图片.doc
2021-06-09 08:58:171.CSS控制背景图片:对于一个网页,我们开始设计的时候,可能没有过多的去想背景图到底是什么,因为大多都是设计背景色就可以了,原因吗,我想也很简单,因为它与前景音乐一样,对于网页的打... -
设置PyCharm背景图片
2020-04-13 15:52:35更换PyCharm背景,换个背景,换个心情写代码,每天都有好心情。 -
java web项目中如何插入背景图片
2021-03-04 07:35:25对于java可视化界面插入背景图片这个倒是轻而易举,只需要background-inage:url(图片路径就行),而对于与web项目中,我开始时也是采用这种方法,但是不尽然,代码如下:效果如下:图片就是不显示,后期我又加了,... -
IDEA 更改背景图片+背景颜色 +自定义更改背景图片
2019-04-15 16:47:17将idea 代码编辑页面的背景进行了更改 步骤: 如果你的IDEA是比较新的版本,那么自带就有这个功能。 首先,进入IDEA,依次打开 File->Settings->Keymap 搜索Set Background Image ,看是否存在 如果... -
纯白色背景图片全白
2021-06-16 13:46:301、求一张比较大的纯白色的图片,只是单纯的白色,没有背景也没有边框的那种LZ,图片如上。。原本是FullHD分辨率的图片,据说会被Bai压缩成200*200如果需要原图的话请留下邮箱其实楼下的。。。不需要用ps直接系统自带... -
CSS3只让背景图片旋转180度
2021-02-04 11:39:05CSS3旋转背景图片一、心路历程二、代码实现 一、心路历程 最近写驾驶舱的时候琢磨了一个问题,就是单纯的使背景图片旋转的一定的角度。 只通过CSS3的transfrom让整个容器都翻转了一定的角度,达不到我想要的效果。 ... -
html的背景图片设置
2021-08-27 23:50:26background-repeat:repeat,在背景上只出现一张图片,没有设置宽高时全屏铺满 background-repeat:repeat-x,横向铺满 background-repeat:repeat-y,纵向铺满 关联方式: background-attachment:scroll 默认 ... -
HTML中怎么让背景图片跟着浏览器窗口变大变小?
2020-12-20 04:52:03HTML中怎么让背景图片跟着浏览器窗口变大变小?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!HTML中怎么让背景图片跟着浏览器窗口变大变小?你可以... -
css如何让背景图片平铺?css背景图片平铺四种方式介绍
2020-05-09 16:12:23在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本篇... -
table设置背景图片,不能100%显示解决方法
2021-06-09 08:57:03(1) 如果文件存放为.jsp文件后缀的形式,代码如下所示(index.jsp):复制代码代码如下:让表格百分之一百显示程序运行后,页面中显示的效果如下图所示:该效果出现了两处不对的地方:(1) 中间的td的背景并没有铺满整个... -
vscode 设置背景图片
2020-08-28 18:41:13[ "file:///C:/Users/23501/Pictures/8124021-e90b4b2232582cea.webp" // 本地图片地址 ], "background.useDefault": false, //是否使用默认图片,false 第四步,ctrl+s 保存,然后重新打开vs code,就完成啦 -
Typora设置图片背景
2021-04-05 23:02:50我啪的一下就下载了很快啊,但是实测并没有小艾米的图片! 还能怎么办!自己动手丰衣足食! 于是上网查了资料,找到了这位老哥同好的博文 【Typora】typora设置主题和添加背景图片 by是馄饨啊 哈哈哈果然lsp的想法... -
css里面,怎么让背景图片在最右边,且上下...
2021-06-09 04:21:042、文字与图片同排,在设置div高度同时再对此css样式的图片“img”样式设置vertical-align:middle垂直居中属性,如.yangshi img{vertical-align:middle;} 。3 不确定宽度的块级元素设置水平居中的方法:(1)、是使... -
vscode 背景图片的设置
2020-07-04 11:19:37但是为什么要设置那么多呢 "background.customImages": [ "file:///C:/SUNYAN/pycharmBackground/timg3.jpg"], “opacity” 重要参数设置透明度,如果不设置很遗憾,你的vs桌面只剩下图片了 其他参数如没有特殊癖好... -
less 导入图片 以及背景图片属性 注意
2020-07-30 16:51:44// Variables @images: “…/img”;//相对于本less 文件的路径 // Usage body { color: #444; background: url("@{images...//少图片位置属性 图片不会显示 //正确简写 background: url("@{images}/white-sand.png") ce -
html怎么设置背景图片全屏平铺?
2021-06-09 06:59:20html怎么设置背景图片全屏平铺?1、新建一个html文档。2、设置一下HTML的框架,然后把图片设置在同一个文件夹里面。3、加入,这样可以有样式设置。4、因为背景设置在主体,所以还要定义为body{}。5、background-... -
背景色和背景图片共存,背景图片覆盖色
2019-07-15 00:07:29文章参考 ... 问题描述 今天公司要做一个大屏展示,背景图片...我的理解背景图片应该是与背景色不能共存的,查询了相关资料,当背景图片和背景色同时作用的时候,背景图片会覆盖背景色,没有覆盖到的就显示背景色,因...