如何使用CSS3属性background-size控制图片大小

 时间:2024-10-13 03:36:12

1、第一步,双击打开HBuilder编辑工具,新建静态页面background_size.html,并插入一个div标签元素,如下图所示:

如何使用CSS3属性background-size控制图片大小

2、第二步,设置ID属性值为background_size的div标签元素的样式,宽度为600px、高度为400px,添加背景图片,如下图所示:

如何使用CSS3属性background-size控制图片大小如何使用CSS3属性background-size控制图片大小

3、第三步,添加background-szie属性,设置其值为50% 50%;background-repeat为no-repeat,如下图所示:

如何使用CSS3属性background-size控制图片大小

4、第四步,保存代码并预览页面,结果发现图片显示为原来的四分之一,如下图所示:

如何使用CSS3属性background-size控制图片大小

5、第五步,将background-size改为100% 100%,添加设置元素半径属性border-radius,如下图所示:

如何使用CSS3属性background-size控制图片大小如何使用CSS3属性background-size控制图片大小

6、第六步,修改background-size为80% 80%,结果发现图片的尺寸变小,部分被覆盖了,如下图所示:

如何使用CSS3属性background-size控制图片大小如何使用CSS3属性background-size控制图片大小

7、第七步,修改宽度、高度和半径,background-size为600px 600px,如下图所示:

如何使用CSS3属性background-size控制图片大小
  • Eclispe设置JDK及源码压缩包
  • PaperAsk官网如何使用积分进行论文查重
  • 如何将图片/照片的文档扫描出来,直接在word?
  • 百度文库怎么查找毕业论文的资料模板
  • PaperAsk论文查重如何使用在线改重功能?
  • 热门搜索
    痔疮疼怎么办 肌肉萎缩怎么办 下巴长痘是怎么回事 怎么修改文件类型 薏仁米怎么吃 苹果手机怎么换卡 q币怎么充值 怎么给硬盘分区 怎么去鼻子上的黑头 怎么写毛笔字