css插入图片方法如下:
操作设备:戴尔笔记本电脑
操作系统:win10
操作程序:html编辑器v8.21
1、打开html编辑器并创建一个新的html文件。
2、新建完一个新的html文件后,在index.html的<style>标签中,输入如下所示的CSS代码。
3、输入完CSS代码之后,接下来运行index.html页面,可以发现,本地图片通过背景图片衜中的本地路径成功调用为了背景图片,图片就成功加入了。
在网站设计中,有时候会遇到对一张图片做多处使用,而每处显示的尺寸又不一定都一样,在传统作法中,需要根据不同尺寸
设计不同的图片。不过利用css,能够很好解决这个问题。
一、直接设置图片的width,height,或者直接改变图片的长宽比例
虽然简单方便,但是会引起图像显示效果问题。因为浏览器不能像ps那样对图像以相对尺寸进行缩放运算,实际显示虽然简单方便,但是会引起图像显示效果问题。因为浏览器不能像ps那样对图像以相对尺寸进行缩放运算,实际显示时图像会出现像素位移的状况。
二、使用clip剪切
CSS对许多对象提供专门用于对象剪切的样式属性——clip,可用clip属性来处理对象最终的显示内容。
clip 设置对象的可视区域。只对绝对定位的对象有效,应用此属性时,对象必须使用position:absolute
可用值:auto, rect(number,number,number,number)
使用clip属性进行对象剪切时,必须给的4个数值。使用方法如下
clip:rect(number1,number2,number3,number4);
number1~number4分别代表上、右、下、左4个边,相对与左上角坐标(0,0)的偏移值。
(这点与margin四个数值代表边的顺序相同,不同的margin的四个值都是相对于自身内容的四边的偏移)
三、使用div强制剪切
使用overflow:hidden;的对象将强制不显示对象中超过对象范围的部分内容