首页 > 软件开发 > CSS >

css中如何调整插入背景图片的大小

来源:互联网 2023-03-16 19:11:02 280

在css中,主要通过background-size属性来调整背景图片的大小。下面小编举例讲解css中如何调整插入背景图片的大小。Ety办公区 - 实用经验教程分享!

css中如何调整插入背景图片的大小Ety办公区 - 实用经验教程分享!

工具/原料

  • html css
  • 代码编辑器:Dreamweaver CS5

方法/步骤

  • 1

    新建一个html文件,命名为test.html,用于讲解css中如何调整插入背景图片的大小。Ety办公区 - 实用经验教程分享!

    css中如何调整插入背景图片的大小Ety办公区 - 实用经验教程分享!

  • 2

    在test.html文件内,使用div标签创建一个模块,并设置其class属性为mydiv,主要用于下面通过该class来设置css样式。Ety办公区 - 实用经验教程分享!

    css中如何调整插入背景图片的大小Ety办公区 - 实用经验教程分享!

  • 3

    在test.html文件内,编写style type="text/css">/style>标签,页面的css样式将写在该标签内。Ety办公区 - 实用经验教程分享!

    css中如何调整插入背景图片的大小Ety办公区 - 实用经验教程分享!

  • 3此文章未经许可获取自百度经验
  • 4

    在css标签内,通过类名mydiv设置div的样式,定义其宽度为500px,高度为400px,边框为1px红色边框。Ety办公区 - 实用经验教程分享!

    css中如何调整插入背景图片的大小Ety办公区 - 实用经验教程分享!

  • 5

    在css标签内,使用background-image属性设置div的背景图片为images文件夹下面的a.jpg,同时使用background-repeat设置背景图片不重复显示。Ety办公区 - 实用经验教程分享!

    css中如何调整插入背景图片的大小Ety办公区 - 实用经验教程分享!

    css中如何调整插入背景图片的大小Ety办公区 - 实用经验教程分享!

  • 6

    在css标签内,使用background-size调整背景图片的大小,第一个参数值是宽度,第二个参数值是高度,例如,这时设置背景图片的高宽为原来一半,即50%。Ety办公区 - 实用经验教程分享!

    css中如何调整插入背景图片的大小Ety办公区 - 实用经验教程分享!

  • 7

    在浏览器打开test.html文件,查看实现的效果。Ety办公区 - 实用经验教程分享!

    css中如何调整插入背景图片的大小Ety办公区 - 实用经验教程分享!

  • 总结:

  • 1

    1、创建一个test.html文件。Ety办公区 - 实用经验教程分享!

    2、在文件中,使用div标签创建一个div模块。Ety办公区 - 实用经验教程分享!

    3、使用css样式设置div的宽度和高度,同时使用background-image设置背景图片。Ety办公区 - 实用经验教程分享!

    4、在css中,使用background-size来调整背景图片的高度和宽度。

    Ety办公区 - 实用经验教程分享!

    Ety办公区 - 实用经验教程分享!

  • 注意事项

    • background-size设置背景图片的宽度、高度,可以是百分比值,也可以像素(px)单位。

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!Ety办公区 - 实用经验教程分享!


    标签: CSS

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码