cssbefore图片大小_before伪类插入图片

需求：

图片放在div里，原来这种需求最先想到的就是定位，但是如果还有其他定位元素的时候，就很容易相互影响，所以这里尝试一下before伪类来实现

样式：

.box{

width:300px;

height:44px;

border:1px solid #000;

position:relative;

}

.box:before{

content:"";

background:url("doorImg2.png") no-repeat;

background-size: 19px 24px;

width:19px;

height:24px;

position:absolute;

left:20px;

top:25%;

}

效果就出来了，这样的话，移动div的位置img也会跟着移动，不用再单独调整img的定位值

这里需要注意的点就是

因为直接用content不能控制图片大小，所以把图片变成背景图片，然后用background-size就能控制图片大小了。这里width:30px;height:30px;也是必要的，不然图片也是不能显示出来，因为content为空就相当于没有宽度，背景图片是不能被渲染出来的。display：inline-block可以换成block，不过效果的话图片就会跑到下一行，但不能没有这个display样式。(我这里没有写也没有发现有什么问题)还有background-size不要不写，如果不明确background-size，但又保留了width和height，那图片只能显示其中的一部分

cssbefore图片大小_before伪类插入图片相关推荐

使用伪元素插入图片大小调整问题
css使用伪元素插入图片大小调整问题需求描述: 想要利用伪元素在a标签后插入图片,调整为合适大小. 效果图: 问题描述: 使用伪元素例如::after的content属性插入图片不能调整图片大小问题 ...
Markdown更改字体、颜色、大小，设置文字背景色，调整图片大小设置居中，插入表格等方法
Markdown更改字体.颜色.大小,设置文字背景色,调整图片大小设置居中,插入表格等方法 Markdown 通过简单标记语法,使普通文本内容具有一定格式.但它本身不支持修改字体.字号与颜色等功能的. ...
openxlpy 在excel中批量插入图片根据单元格内容插入图片图片随单元格大小变化而变化 AnchorMarker python
需求: 根据单元格的文本内容,插入相同名称的图片: 图片大小与单元格大小相同要用到OS库和openxlpy库步骤: 遍历excel区域里面的单元格,看是否有文本内容根据文本内容确定图片的名称,从 ...
html页面懒加载灰度图片大小,小程序初级指南--图片及其优化
图片格式开发中常见的图片格式有 GIF.PNG8.PNG24.JPEG.WEBP. 我们需要根据图片格式的特性和场景需要选取适合的图片格式,而不是设计给什么用什么. PNGPNG 的目的是替代GIF ...
ArcGis如何插入图片_在word中插入图片，如何避免失真模糊？实用文档建议收藏...
插入图片在WORD文档中插入图片是一个相当常用的操作. 一般通常的做法,是使用工具截图或在其他工具中复制的图片类内容,然后在WORD文档中粘贴出来. 还有一种做法,是使用功能区"插入&qu ...
计算机课板书图片,小学信息技术课《插入图片及剪贴画》说课稿
一.说教材 1.教材分析 <插入图片及剪贴画>是江西科学技术出版社小学信息技术教材四年级上册的内容,是在学生基本掌握了WORD文本的编辑和排版的基础上进行学习的.本课主要是让学生掌握在Wo ...
在html中怎么插入动态图片,如何在gif中插入图片动态图片某1帧插入图片并控制显示时间|动态图片中插入图片...
大家还记得我以前的一个教程嘛?就是如何在视频中插入图片并控制其显示时间,有印象的话就太棒了,没印象的或就点击上边的文字自己做一下功课吧!! 今天的教程内容和上边所讲到的教程有点相似,都是插入图片,但是 ...
计算机作业word样文图片,word文档中插入图片学案
word文档中插入图片学案一.教学目的: 1.使学生学会在文章中如何插入图片,并调整图片周围文字的排版方式,去美化自己的文章. 2.培养学生的自主学习能力,合作学习能力,创新能力和动手操作能力.进一 ...
使用html插入图片教案,小学信息技术:《插入图片》教案范文
小学信息技术:<插入图片>教案范文一.教学内容分析: <插入图片>是省编九年义务教育小学信息技术第三十五课的内容.此课是在学生已掌握了WORD2000文字的输入与修饰.段落调 ...

cssbefore图片大小_before伪类插入图片

cssbefore图片大小_before伪类插入图片相关推荐

最新文章

热门文章