热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

css怎么引入图片文件

css引入图片文件的方法:1、通过“background-image:url(图片地址)”方法来引入;2、使用“background:url(图片地址)”方法来引入图片,展现到网页中即可。

css引入图片文件的方法:1、通过“background-image:url(图片地址)”方法来引入;2、使用“background:url(图片地址)”方法来引入图片,展现到网页中即可。

本教程操作环境:Dell G3电脑、Windows7系统、HTML5&&CSS3版本。

推荐:《css视频教程》

css引入图片文件

在CSS中,可以用background-image:url(你的图片地址)或background:url(你的图片地址)来引入图片,展现到网页中。

#bgimg { background: #333 url(图片路径) center center no-repeat; }

第一个参数,图片底层的背景颜色,第二个参数,图片路径,第三个参数,图片上下的相对位置(其他参数left,right),第四个参数,图片左右的相对位置(top,bottom),第五个参数,图片的重复(其他参数 repeat,repeat-x,repeat-y)。

示例:


    
        
        
        
    
    
        

效果图:

说明:

background属性是一个简写属性,可以在一个声明中设置所有的背景属性。

background属性就是专门设置背景的属性,可以设置背景色,也可以设置背景图片。

下面看看background可以设置的属性:

background-color: 规定要使用的背景颜色。

background-position: 规定背景图像的位置。

background-size: 规定背景图片的尺寸。

background-repeat :规定如何重复背景图像。

background-origin :规定背景图片的定位区域。

background-clip: 规定背景的绘制区域。

background-attachment: 规定背景图像是否固定或者随着页面的其余部分滚动。

background-image :规定要使用的背景图像。

元素的背景是元素的总大小,包括填充和边界(但不包括边距)。默认情况下,background-image放置在元素的左上角,并重复垂直和水平方向。

以上就是css 怎么引入图片文件的详细内容,更多请关注其它相关文章!


推荐阅读
  • 本文介绍如何在Windows 7操作系统中配置支持HTML5多点触控功能的设备,同时探讨了HTML5在开发Windows桌面应用程序中的可能性。 ... [详细]
  • 本文详细介绍了在Delphi环境中对DLL文件进行断点调试的方法,包括设置依赖的可执行文件、编译器和链接器的调试选项,以及运行时参数的配置。 ... [详细]
  • 本文介绍如何创建一个专门用于处理浮点数的JSON处理器,并将其注册到JSON配置器中,以实现对浮点数的精确控制和格式化输出。 ... [详细]
  • 本文介绍了iftop的下载地址、基本参数配置方法及其在不同Linux发行版中的安装问题解决方案。iftop是一款强大的实时网络流量监控工具,适用于需要精确监控网络带宽使用情况的场景。 ... [详细]
  • 在J2EE开发领域,众多专业术语如PO、VO、BO、DTO、POJO及DAO常常令初学者感到困惑。本文旨在清晰解释这些术语及其相互间的关系,帮助开发者更好地理解和运用这些概念。 ... [详细]
  • 本文提供了关于WSDL(Web Services Description Language)的详细参考资料链接,包括官方文档和深入解析,旨在帮助开发者更好地理解和使用WSDL进行Web服务的开发与集成。 ... [详细]
  • 本文详细介绍了 HTML DOM 中的 document.getElementsByTagName 方法,通过实例说明其用法和应用场景。 ... [详细]
  • 在使用Firefox浏览器打开本地HTML文件时,尝试调用Canvas的drawImage方法可能会遇到NS_ERROR_NOT_AVAILABLE错误。本文探讨了这一问题的原因及解决方案。 ... [详细]
  • 本毕业设计探讨了通过图像处理技术对道路表面进行区域增强及整体检测的方法,旨在提高道路维护效率和安全性。 ... [详细]
  • C语言编程课程第十二课
    本课程将深入探讨C语言中的数组操作与基本算法实现,包括最大最小值交换、数组旋转以及约瑟夫环问题等经典案例分析。 ... [详细]
  • Python库在GIS与三维可视化中的应用
    Python库极大地扩展了GIS的能力,使其能够执行复杂的数据科学任务。本文探讨了几个关键的Python库,这些库不仅增强了GIS的核心功能,还推动了地理信息系统向更高层次的应用发展。 ... [详细]
  • 本文介绍如何使用Python编写一个简单的爬虫程序,从知乎问题页面抓取美腿图片。环境配置包括Windows 10操作系统,Python语言及其相关库。 ... [详细]
  • 如何清空Layui树结构
    本文将详细介绍如何使用Layui框架清空树形结构,包括创建树、添加节点以及实现清空功能的具体步骤。通过本文,您将能够掌握Layui树的管理技巧。 ... [详细]
  • 本文深入探讨了HTML5中十五个重要的新特性,为开发者提供了详细的指南。 ... [详细]
  • 本文详细介绍了在PHP中如何获取和处理HTTP头部信息,包括通过cURL获取请求头信息、使用header函数发送响应头以及获取客户端HTTP头部的方法。同时,还探讨了PHP中$_SERVER变量的使用,以获取客户端和服务器的相关信息。 ... [详细]
author-avatar
雨含的晴天
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有