-
2022-01-05 23:14:15
在背景图片的背景图片位置属性中,background-position是用来控制元素背景图片的位置。它接受三种值:关键词:如top、right、bottom、left、center
长度值;如px、em、rem等
百分值:%
background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。
background-position 属性的属性值:
其中部分属性值的含义如下所述:top: 背景图片的初始位置为元素顶部
center: 背景图片的起始位置为元素中部
left: 背景图片的起始位置为元素左侧
right: 背景图片的起始位置为元素右侧
bottom: 背景图片的起始位置为元素底部
更多相关内容 -
HTML中如何设置图片位置
2021-06-08 17:41:39Html设置图片位置的方法:首先给图片元素添加“position:absolute;”样式,设置图片绝对定位;然后使用left属性设置定位元素左外边距边界与其包含块左边界之间的偏移量;最后使用top属性设置定位元素的顶部偏移量...Html设置图片位置的方法:首先给图片元素添加“position:absolute;”样式,设置图片绝对定位;然后使用left属性设置定位元素左外边距边界与其包含块左边界之间的偏移量;最后使用top属性设置定位元素的顶部偏移量即可。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
Html设置图片位置
图片默认位置:
使用下面代码,设置图片位置后/*设置图片的属性*/
img {
position: absolute;
/*绝对位移*/
left: 300px;
/*left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。*/
top: 150px;
/*top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。*/
}
效果图:
-
css怎么设置图片位置?
2021-06-11 15:55:06下面本篇文章就来给大家介绍使用CSS设置图片位置的方法,希望对大家有所帮助。1、使用position属性来设置img图片的位置position 属性规定元素的定位类型。说明这个属性定义建立元素布局所用的定位机制。任何元素都...在HTML中,显示图片的方式有两种:img图片和背景(background)图片。那么在HTML中怎么使用css设置图片位置?下面本篇文章就来给大家介绍使用CSS设置图片位置的方法,希望对大家有所帮助。
1、使用position属性来设置img图片的位置
position 属性规定元素的定位类型。
说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
有四个属性值:absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative:生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
示例:
img {
position: absolute;
left: 100px;
top: 100px
}
通过绝对定位,元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px,距离页面顶部 150px。
效果图:
2、使用background-position属性设置背景图片的位置
在背景图片的背景图片位置属性中,background-position是用来控制元素背景图片的位置。它接受三种值:关键词,如top、right、bottom、left、center
长度值,如px、em、rem等
百分值:%
background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。
示例:
div{width: 200px;height: 200px;
border:1px solid #ccc;
background: url('/i/eg_bg_03.gif') no-repeat left bottom;}
效果图:
更多前端开发知识,请查阅 HTML中文网 !!
-
zk框架获取POI Excel图片 以及 设置图片位置和大小的方法
2017-06-24 12:24:32我们项目使用的是03excel,但是问题是,获取到的workbook可以得到文本信息,图片信息获取不到。经过仔细研究,发现其实图片流是能获取到的,但是保存的时候,不会保存图片信息。所以我们采用的办法是这样的,首先...我们项目使用的是03excel,但是问题是,获取到的workbook可以得到文本信息,图片信息获取不到。经过仔细研究,发现其实图片流是能获取到的,但是保存的时候,不会保存图片信息。所以我们采用的办法是这样的,首先获取的book转成流,然后再将这个流信息,通过POI转换成我们想要的HSSFWorkBook流,再单独将图片添加进去。希望能帮助大家,进行一个分享。
需要说明一下,zk获取到的Book和zk框架封住好的Book底层好像是spreadsheet的SBook,而poi是workbook(两个子类,HSSFWorkBook和XSSFWorkBook)
首先获取到Book,然后转换成流信息保存成模板。
/** * 保存模板 * @param ctx * @throws Exception */
public void repSave(UserActionContext ctx) throws Exception { IReportFacade reportImpl = BeanFactory.getBean("reportImpl", IReportFacade.class); Report report = this.designer.getReport();
//获取到BOOK Book book = this.designer.getBook(); byte[] data = ctx.getSpreadsheet().getSBook().getSheet(0).getPictures().get(0).getData(); ViewAnchor anchor = ctx.getSpreadsheet().getSBook().getSheet(0).getPictures().get(0).getAnchor(); try { //获取到Book的流信息,但是这里没有图片 byte[] file = ZkSheetUtil.getWorkBookData(book); report.setOwcContent(file);
这里是将Book保存成流的方法:将上面的模板流转换成新的HSSFWorkbook ,再单独添加图片。 HSSFWorkbook wb = (HSSFWorkbook) WorkbookFactory.create(new ByteArrayInputStream(file)); int pictureIdx = wb.addPicture(data, HSSFWorkbook.PICTURE_TYPE_JPEG); CreationHelper helper = wb.getCreationHelper(); int sheetsNum = wb.getNumberOfSheets(); for (int i = 0; i < sheetsNum; i++) { Drawing drawing = wb.getSheetAt(i).createDrawingPatriarch(); ClientAnchor anchorw = helper.createClientAnchor(); //设置图片属性 getAnchorw(wb.getSheetAt(i),anchor,anchorw); //保存图片 drawing.createPicture(anchorw, pictureIdx); } //将完成的workbook转成成流信息就行保存 ByteArrayOutputStream bos = new ByteArrayOutputStream(); wb.write(bos); report.setOwcContent(bos.toByteArray()); bos.close(); } catch (IOException e) { e.printStackTrace(); } reportImpl.updateReportOWC(this.designer.getReport()); Clients.evalJavaScript("parent.DesignerCtrl.showMessage('保存成功!');"); }
/** * @param book * @return * @throws IOException */ public static byte[] getWorkBookData(Book book) throws IOException { String type = "excel"; switch (book.getType()) { case XLS: type = "xls"; break; case XLSX: default: type = "xlsx"; break; } ByteArrayOutputStream bos = new ByteArrayOutputStream(); Exporters.getExporter(type).export(book, bos); bos.close(); return bos.toByteArray(); }
这里是设置图片属性的方法。(这里是重点)
刚开始我从网上查了很多资料,知道了设置图片的几个重要属性,就是dx1,dy1,dx2,dy2,col1,row1,col2.row2 这是确定图片位置属性。
图片是网上别人博客偷过来了,不好意思。
其中:
dx1:the x coordinate within the first cell。
dy1:the y coordinate within the first cell。
dx2:the x coordinate within the second cell。
dy2:the y coordinate within the second cell。
col1:the column (0 based) of the first cell。
row1:the row (0 based) of the first cell。
col2:the column (0 based) of the second cell。
row2:the row (0 based) of the second cell。
这里dx1、dy1定义了该图片在开始cell的起始位置,dx2、dy2定义了在终cell的结束位置。col1、row1定义了开始cell、col2、row2定义了结束cell。所以只要把这几个属性设置好了,图片就不会变形,也不会乱跑了。
通过自己的计算,粗略的知道了,图片宽度和单元格宽度的比例是32:1,图片高度和单元格高度的比例是15 : 1,还知道,row的默认高度是255,col的默认宽度是2048,然后每个单元格的像素填满时,宽是1024,高是256。所以知道了这些固定值,就能大概计算出图片的位置了。
private void getAnchorw(HSSFSheet sheet, ViewAnchor anchor,ClientAnchor anchorw) { int col2 = anchor.getColumnIndex(); int dx2 = 0; float colwidth = (float) (32*anchor.getWidth()); for(int col = anchor.getColumnIndex();;col++){ int x = (int) (colwidth - sheet.getColumnWidth(col)); if(colwidth - sheet.getColumnWidth(col) <= 0){ col2 = col; dx2= (int)((colwidth/(float)sheet.getColumnWidth(col))*1024); break; }else{ colwidth = colwidth -sheet.getColumnWidth(col); } } int row2 = anchor.getRowIndex(); int dy2 = 0; float rowHeight = (float) (15*anchor.getHeight()); for (int row = anchor.getRowIndex();; row++) { if(sheet.getRow(row) == null){ if(rowHeight - 255 <= 0){ row2 = row; dy2= (int)((rowHeight/255)*256); break; }else{ rowHeight = rowHeight - 255; } }else{ if(rowHeight - sheet.getRow(row).getHeight() <= 0){ row2 = row; dy2= (int)((rowHeight/(float)sheet.getRow(row).getHeight())*256); break; }else{ rowHeight = rowHeight - sheet.getRow(row).getHeight(); } } } anchorw.setCol1(anchor.getColumnIndex()); anchorw.setRow1(anchor.getRowIndex()); anchorw.setCol2(col2); anchorw.setRow2(row2); anchorw.setDx2(dx2); anchorw.setDy2(dy2); anchorw.setDx1(0); anchorw.setDy1(0); }
效果图:(第一次保存)
第二次保存:
大概就是这样,希望对大家有帮助。
-
怎样设置label的位置啊?求指导
2021-03-08 03:17:00JLabel label=new JLabel("~~~为什么就是不能设置label的位置呢?~~~"); panel.add(label); panel.setBackground(Color.black); label.setFont(new Font("华文行楷",Font.BOLD,24)); label.setForeground(Color.red... -
根据url给imageview设置图片显示
2021-06-08 05:58:43//这是图片地址String imageUrl = "http://139.224.43.42/medical/Uploads/head/07c3b4de0173f0128d6c2ec78c8e3828.jpg";1、修改你的main.xml文件如下:android:orientation="vertical"android:layout_width="fill_... -
tkinter 设置背景图片 和 label显示位置以及label设置显示图片
2021-05-17 15:50:26root = tk.Canvas(root, width=1000, height=600) im_root = get_img('./background/background.jpg', 1000, 600) canvas_root.create_image(500, 300, image=im_root) canvas_root.pack() # label 中设置图片 ... -
将图形设置为屏幕:用于在多个显示器上定义默认图形位置-matlab开发
2021-06-01 16:55:00它还允许根据监视器或先前绘制的图形设置默认位置。 这意味着您甚至可以设置默认位置以填充整个显示器! 例子: set_figure_toscreen(a) 其中“a”是数字,可以是监视器编号(1、2、3、4)或图形句柄。 set_figure... -
Android 如何设置RadioButton中图片的位置和大小
2020-06-21 08:26:36Android 如何设置RadioButton中图片的位置和...方案二:通过代码来设置图片的大小和位置。 代码如下: //定义底部标签图片大小和位置F Drawable drawable_news1 = getResources().getDrawable(R.drawable.selector_ma -
HTML中怎么设置图片的位置和大小
2018-11-06 18:23:46HTML中怎么设置图片的位置和大小 -
CSS设置图片的位置
2016-08-08 22:27:56CSS设置图片的位置 CSS通过background-position属性来调整背景图片的位置。 比如,当希望背景图片显示在页面的右下角时,可以设置属性值为bottomright即可。 背景的位置 <!-- body{ ... -
在Word2021中设置SmartArt图形位置_1.docx
2021-09-27 06:30:30在Word2021中设置SmartArt图形位置_1.docx -
Latex强制图片位置
2021-12-02 19:36:26会导致图片处于页面中央,可能会独占一页等等,所所以我们需要调整图像的位置: 常用选项[htbp]是浮动格式: 『h』当前位置。将图形放置在正文文本中给出该图形环境的地方。如果本页所剩的页面不够,这一参数将不起... -
如何在css中设置插入图片定位
2021-06-11 02:03:08在做网页开发时,客户...如何在css中设置插入图片定位首先设置固定图片的css属性是background-attachmentbackground-attachment它有两个属性值fixed/scroll● background-attachment:fixed;表示固定图片,图片不随... -
在Word2021中设置SmartArt图形位置.docx
2021-09-27 06:30:29在Word2021中设置SmartArt图形位置.docx -
Web基础(从零开始)——CSS背景设置(颜色,图片,位置,背景图像固定)
2021-11-13 09:58:372.背景图片:(插入图片位置比较难调,一般使用背景图片)通过 background-image: url(图片地址); 设置背景图片,背景图片默认平铺。 设置背景平铺:background-repeat: repeat(平铺)|no-repeat(不平铺)|repeat... -
QToolButton设置图标位置
2021-05-21 16:52:23目录设置QToolButton图标位置设置图标处于左侧位置向右移动一段距离设置图标处于中间位置文字向下移动一段距离小遗憾 设置QToolButton图标位置 QToolButton通过left,top等方式设置的图标,紧靠按钮边缘,视觉效果并... -
Latex插入图片并固定图片位置
2021-08-27 14:56:56然后可以设置图片的路径 \graphicspath{ {pic/} } 然后使用: \begin{figure}[H] % 这四个字母可以出现一个或多个:htbp 代表图片插入位置的设置 \centering % 图片居中 \includegraphics[height=10cm,width=10cm... -
matlab绘制图形设定title的位置
2015-12-02 13:51:39详细介绍了matlab绘制图形后设定title的位置的方法 -
css如何设置背景图片位置?
2021-06-12 09:32:19在使用背景图片时,经常会遇到背景图片所在的位置不是我们想要的,那如何设置背景图片的位置呢?下面我们来看一下css设置背景图片位置的方法。在背景图片的背景图片位置属性中,background-position是用来控制元素... -
Android 在代码中设置imageview的大小和位置(满足单方向的放大缩小和任意位置的移动)
2017-12-29 09:44:31设置图片距离父控件左边距离为40,距离上面的距离为100,通过这两个参数就可以设置图片在父控件中的位置。笔者为了让读者更加清晰的看出代码的逻辑,就把函数拆分了,其实可以通过上面的layoutParams.setMargins()... -
在Word2010中设置SmartArt图形位置[归纳].pdf
2021-10-14 09:38:21在Word2010中设置SmartArt图形位置[归纳].pdf -
用Word2007查找和替换功能批量设置图片位置
2012-11-01 23:03:17Word2007的“查找和替换”功能并不仅仅可以对文字进行批量的查找替换,还有很多神奇的功能,比如对插入的图片位置进行批量的查找和调整等等。 今天我们就来试试Word2007的“查找和替换”功能在文字替换外的应用,... -
html如何调整图片位置
2021-03-27 09:56:481、可以使用background-position属性设置图片位置,具体的方法是,首先用hbuilder软件新建一个html文件,文件的head标签中设置输入style标签: 2、然后设置body的样式,给body加一张图片,设置为不重复,设置... -
控制web前端图片位置
2021-02-16 15:52:06控制图片位置: 距离页面右端 margin-right:200px 距离页面左端: margin-left:200px 距离页面顶部: margin-top:200px 距离页面底部: margin-bottem:200px -
MATLAB中设置图的位置和尺寸
2018-09-12 20:48:46对图形的位置及大小进行设置,如: set(gcf,'unit','centimeters','position',[10 5 7 5]); 单位为厘米,大小为7cm×5cm,图形起点坐标为(10cm,5cm)表示左下点离显示器左侧边界10cm,离下侧边界5cm。 将...